Angular 5基于角色的路由激活

我知道我可以使用基于角色/身份验证的路由，我可以在路由模块中激活和停用它。 我还想隐藏基于Guard的选项。 我有一个

[AuthGuard]

和一个

[RoleGuard]

都实现了

canLoad（）

，

canActivate（）

等，并被分配到路由的相应属性。 现在我想知道我是否可以做同样的链接，这是导航选项，我作为一个数组

 options: MenuItem[] = [
      {
          page: "Active Devices",
          icon: "tablet",
          path: "device-status",
          canLoad:[AuthGuard]
      }, {
          page: "Data Sync",
          icon: "refresh",
          path: "data-sync", 
          canLoad: [AuthGuard]
      }, {
          page: "Add Users",
          icon: "user",
          path: "add-users",
          canLoad: [AuthGuard]
      }, {
          page: "Change Password",
          icon: "key",
          path: "change-password",
          canLoad: [AuthGuard]
      }]

---

我想知道如何使AuthGuard中的

canLoad（）

函数获得分配给

canLoad（）的值

这个数组。

我遇到了类似的问题，最后编写了自定义管道，它将角色数组作为输入，检查它们是否与我存储在localStorage中的角色匹配，并返回

true

或

false

因此，您的菜单项将如下所示：

{
    page: "Active Devices",
    icon: "tablet",
    path: "device-status",
    roles: ['Role 1', 'Role 2']
}

然后，在模板中，您可以执行以下操作

*ngIf=“menuitem.roles | checkAccess”

其中

checkAccess

是执行所有检查的管道的名称

这种方法的优点是，如果需要隐藏除导航项以外的任何内容，可以在应用程序的任何部分重复使用

checkAccess

管道