Question

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

简而言之，我的方案是：角色是动态的，并且基于客户端可以配置的权限，也可以是动态的。

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

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

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

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

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

感谢收听。

Answer 1

您可以尝试使用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。

Answer 2

检查CASL，有关Vue和Aurelia中的集成的文章，但Angular 2+的实现应该非常相似

您可以定义每个用户的能力的主要想法

import { AbilityBuilder } from 'casl'


// allow to read and create Todo-s for everybody and update for assignees
export default AbilityBuilder.define(can => {
  can(['read','create'], 'Todo')
  can(['update'], 'Todo', { assignee: user.id })
})

文档中还有一篇关于如何map abilities to different roles

的文章

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

2 个答案: