![](/img/trans.png)
[英]how to implement different roles in an angular application with JWT
[英]How to implement roles in Angular 2?
我使用angular2-token进行授权。 我试图禁止具有特定角色的用户转换到路由页面。
路线:
...
{path: '', component: Test1Component, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
children: [
{path: 'test2', component: Test2Component, data: {roles: ['admin', 'user']}},
{path: 'test3', component: Test3Component, data: {roles: ['admin']}}
]
},
...
警卫:
...
canActivateChild(route: ActivatedRouteSnapshot): Promise<boolean>|boolean {
let role = 'user';
let roles = route.data['roles'] as Array<string>;
if (!roles || roles.indexOf(role ) != -1) return true;
else {
this.router.navigate(['']);
return false;
}
}
...
结果,页面“test3”没有一个用户甚至无法获得具有“admin”角色的用户。 允许访问此页面的唯一方法是将“用户”角色添加到“管理员”角色的路由中。因此,如果此人没有管理员角色,如何禁止访问该页面?
我想问题可能是由于您的AuthGuard
。 您的AuthGuard
需要同时实现CanActivate
和CanActivateChild
接口。
此外,您需要处理AuthGuard CanActivate function
中没有data.roles
的情况,因为在您的路由定义中,您的 Test1 组件路由没有data.roles
。 这是否意味着每个人都可以访问Test1?
您的路线未显示可能是因为未处理上述情况。
我创建了一个示例应用程序。 像魅力一样工作: https : //stackblitz.com/edit/so-route 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.