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

Question

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

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

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

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

请建议我用插图即兴创作。我想以正确的方式做每件事。

Answer 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;
}

请阅读此处的文档。

编辑：

我建议你使用角色路由，因为它更容易维护，更稳定，但你可以在你的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
}

这将使维护更容易，因为您不需要为添加的新路由更新所有用户。

Answer 2

我建议您使用ngx-permissions，检查一下。它可以完美地根据模板或路由中的角色提供访问权限，您可以在身份验证后为每个用户加载权限

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 {}

Answer 3

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