如何在Angular 2中实现角色?

时间:2018-08-19 12:33:26

标签: angular

我使用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”角色的页面。允许访问此页面的唯一方法是将“用户”角色添加到“管理员”角色的路由中。因此,如果此人不具有管理员角色,那么如何禁用此页面?< / p>

1 个答案:

答案 0 :(得分:0)

我想问题可能出在您的AuthGuard上。您的AuthGuard需要同时实现CanActivateCanActivateChild接口。

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

您的路线未显示,可能是由于上述情况未解决。

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