如何在 Angular 2 中实现角色?

Question

我使用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"角色的用户。允许访问此页面的唯一方法是将"用户"角色添加到路由到"管理员"角色"。那么，如果该人没有管理员角色，以下是如何使禁令转到页面？

Answer 1

我想问题可能是由于您的AuthGuard.您的AuthGuard需要同时实现CanActivate和CanActivateChild接口。

此外，您需要处理AuthGuard CanActivate function中没有data.roles的情况，因为在路由定义中，Test1 组件路由没有data.roles。这是否意味着每个人都可以访问Test1？

您的路线未显示可能是因为未处理上述情况。

我创建了一个示例应用程序。像魅力一样工作：https://stackblitz.com/edit/so-route。