Angular 5 基于角色的路由激活

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 和 returns true 或 false.

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

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

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

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

Angular 5 基于角色的路由激活

Angular 5 Role based Route activation

authorization

angular

angular-router

angular5