Angular 5 基于角色的路由激活答案

【问题标题】：Angular 5 Role based Route activationAngular 5 基于角色的路由激活
【发布时间】：2017-11-23 14:21:42
【问题描述】：

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

【问题讨论】：

标签： angular authorization angular-router angular5

【解决方案1】：

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

所以您的菜单项将如下所示：

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

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

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

【讨论】：