9

使用 Angular 2 实现 ACL / 基于纸张的最佳方法是什么？

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

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

但这样可能会陷入另外两个问题：

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

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

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

谢谢收听。

4

2 回答 2

4

您可以尝试为此使用ngx-permissions库。然后，它支持 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 页面。

于 2017-09-14T08:18:39.633 回答
3

检查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 })
})

文档中还有一篇关于如何将能力映射到不同角色的文章

于 2017-12-29T07:15:01.133 回答