Question

我知道我可以使用基于角色/身份验证的路由，我可以在路由模块上激活和停用它。我还想隐藏基于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()。

Answer 1

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

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

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

然后在您的模板中，您可以执行类似*ngIf="menuitem.roles | checkAccess"之类的操作，其中checkAccess是执行所有检查的管道名称。

这种方法的优点是，如果您需要隐藏除导航项之外的任何其他内容，则可以在应用程序的任何部分重用checkAccess管道。

Angular 5基于角色的路线激活

1 个答案: