如何使用angular 2实现基于ACL /角色的授权?

前端之家收集整理的这篇文章主要介绍了如何使用angular 2实现基于ACL /角色的授权?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用角度2实现ACL /纸质的最佳方法是什么?

简而言之,我的方案是:角色是动态的,基于客户端可以配置的权限,也可以是动态的.

我需要阻止用户访问他无权执行的特定资源.为此我想到了使用Angular的Guards概念.使用CanActivate Guard,我可以根据我在每条路线中放置的信息来设置是否让用户通过.此信息将是该路由引用的资源的名称.当我到警卫队时,我可以与他的角色进行比较,看看他的角色是否可以访问此功能以及是否允许导航.

但随之而来的可能还有两个问题:

1 – 如何将用户重定向到他有权访问的资源?我是否必须列出路径文件并寻找与其角色兼容的人然后重定向

2 – 如何禁用在可以访问的页面上看不到的组件?例如,它可以访问列表页面X,但它无权创建新项目,因此我需要删除Create Something按钮.或者更确切地说,如何使用divs元素来执行此操作,这些元素包含某些角色的特定信息,但不包含角色的角色?

我想知道在角度生态系统中如何最好地处理这种情况.

谢谢收听.

您可以尝试使用 ngx-permissions库.它支持,然后,语法,延迟加载,孤立的延迟加载.将库添加到项目中: @H_403_19@@NgModule({ imports: [ NgxPermissionsModule.forRoot() ] }) export class AppModule { }

加载角色

@H_403_19@NgxRolesService .addRole('ROLE_NAME',['permissionNameA','permissionNameB']) NgxRolesService.addRole('Guest',() => { return this.sessionService.checkSession().toPromise(); }); NgxRolesService.addRole('Guest',() => { return true; });

在模板中使用

@H_403_19@<div *ngxPermissionsOnly="['ADMIN','GUEST']"> <div>You can see this text congrats</div> </div>

保护你的卫兵

@H_403_19@const appRoutes: Routes = [ { path: 'home',component: HomeComponent,canActivate: [NgxPermissionsGuard],data: { permissions: { only: ['ADMIN','MODERATOR'],except: ['GUEST'] } } },];

详细文档结帐wiki page.

猜你在找的Angularjs相关文章