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

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

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

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

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

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

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

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

谢谢收听.

您可以尝试使用 ngx-permissions库.它支持,然后,语法,延迟加载,孤立的延迟加载.将库添加到项目中:
@NgModule({

 imports: [
    NgxPermissionsModule.forRoot()
 ] 
 })
 export class AppModule { }

加载角色

NgxRolesService
 .addRole('ROLE_NAME',['permissionNameA','permissionNameB'])

 NgxRolesService.addRole('Guest',() => {
  return this.sessionService.checkSession().toPromise();
 }); 

 NgxRolesService.addRole('Guest',() => {
     return true;
 });

在模板中使用

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

保护你的卫兵

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

详细文档结帐wiki page.

原文链接:https://www.f2er.com/angularjs/141994.html

猜你在找的Angularjs相关文章