在 Angular 6 或更高版本中基于用户动态权限访问路由答案

【问题标题】：Access Routes based on user dynamic permissions in Angular 6 or later在 Angular 6 或更高版本中基于用户动态权限访问路由
【发布时间】：2020-03-15 20:19:08
【问题描述】：

我已对登录的用户应用基于角色的授权。JWT 令牌存储在 localStorage 中，并且路由基于 Login 和 auth.guard.ts 获取访问权限。

但除此之外，某些用户还需要访问某些具有相同角色的其他用户无法访问的组件。 JSON 数组定义了用户即使在登录后也可以访问哪些路由。

我为完成这项工作所做的定义是检查组件的ngOnInit。如果该组件存在于数组中，则应该允许它访问其他必须显示的404 page。

但似乎我并没有发现这种方法是一种有效的方法。

请提出我可以用插图做的任何即兴创作。想做所有事情都以正确的方式完成。

【问题讨论】：

请提供至少包含部分代码的工作 stackblitz.com，以便我们为您提供一些帮助。
你可以使用另一个警卫。这是一个例子，他们是如何解决类似问题的：stackoverflow.com/q/40589878
@insertusernamehere 我想到了类似的想法，但是 Roleguard 如何知道访问了哪个组件或路由以从数组列表中过滤掉。请注意，我是 Angular 新手。

标签： angular permissions routes authorization

【解决方案1】：

您可以对特定路由进行角色验证：

const routes: Routes = [
    {   //todo route you want to add validation for
        path: 'route',
        component: Component,
        canActivate: [AuthGuard],
        data: { roles: ["Admin"] } //recommend you dont use string here.
    },
    { path: '**', redirectTo: '' }
];

然后只需将这些行添加到您现有的 canActivate 函数中：

    let currentUser = User;
    if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
        // role not authorised so redirect to home page
        this.router.navigate(['/']);
        return false;
    }

阅读文档here。

编辑：

我建议您使用角色路由，因为它更易于维护且更稳定，但是您可以将类似这样的内容添加到您的 canActivate 函数中：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     let stateName: string = state.url.replace("/", "");
     let currentUser = User;
     if (currentUser.routePermissions.includes(stateName)) {
         // route not authorised so redirect to home page
         this.router.navigate(['/']);
         return false;
     }
}

可以使用路由对象来代替数组，并且只匹配实际的错误匹配。

user.routePermissions = {
    'route1': false
}

这将使维护变得更容易，因为您无需为添加的新路线更新所有用户。

【讨论】：

这已经实现了，就像我没有任何角色，但用户可以访问的组件或路由列表。
我编辑了我的答案以满足您的需求，但我不建议这样做，因为它需要大量维护

【解决方案2】：

我建议你使用ngx-permissions，检查this。它非常适合根据模板或路由中的角色授予访问权限，您可以在身份验证后为每个用户加载权限

this.permissionsService.loadPermissions(perm);

然后你可以在任何地方使用它们canActivate、canLoad 来管理访问权限

 const appRoutes: Routes = [
 {
  path: 'lazy',
   data: {
    permissions: {
     except: 'ADDDMIN',
    }
  },
  canLoad: [NgxPermissionsGuard],
  loadChildren: 'app/lazy-module/lazy-module.module#LazyModule'
},
];

@NgModule({
 imports: [
  RouterModule.forRoot(appRoutes)
 ],
 exports: [
   RouterModule
 ],
 providers: [
  // CanDeactivateGuard
 ]
})
export class AppRoutingModule {}

【讨论】：

【解决方案3】：

您需要根据基于角色的用户授权创建不同的模块每个Molude都有一个基础路由文件，你需要检查这个模块是否根据用户授权在路由中使用AuthGuard。

【讨论】：