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

Question

使用角度2实现ACL /纸质的最佳方法是什么？

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

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

但是,这可能会导致另外两个问题:

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

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

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

谢谢收听.

Answer 1

您可以尝试使用ngx-permissions库来实现此目的。它支持 then、else 语法、延迟加载、隔离延迟加载。将库添加到项目中：

@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 页面。