Angular 8 - 如何使用 ngx-permissions 授权权限而不是角色？

Question

我在项目中使用 ngx-permissions (https://www.npmjs.com/package/ngx-permissions)，以便管理用户对我的应用程序的权限。

据我所知，我们可以在 html 部分授权角色，但不能授权...

这就是我们想要的：

HTML：

<div *ngxPermissionsOnly="['voirResources']">1232465</div>

打字稿：

  ngOnInit() {
    const roleMetier: Role = new Role();
    roleMetier.nom = 'ADMIN';
    roleMetier.permissions = ['voirHighlightCard', 'voirResources', 'voirTout', 'voirNextSteps'];
    this.rolesService.addRole(roleMetier.nom, roleMetier.permissions);

    this.permissionsService.loadPermissions(['ADMIN']);
  }

如您所见，我为我的角色管理员设置了一些权限。 之后，我为当前用户加载管理员权限。

在 Html 代码中，我添加了 *ngxPermissions="['voirResources']" 以便只有具有 "voirResources" 权限的用户才能看到 div 内容。

这是 stackblitz 上的代码 => https://stackblitz.com/edit/angular-poc-ngx-permissions

我的问题是：

• 我们可以使用 ngx-permissions 吗？
• 如果我们不能用 ngx-permissions 做到这一点，你知道我可以使用另一个 npm 包吗？如果有什么很酷的东西我不想开发另一个 ACL 包^^

感谢您的建议！

Answer 1

您需要使用this.permissionsService.addPermission(['seeContent']); 或通过loadPermission

所以修改你的堆栈闪电战：

ngOnInit() {
// this.chargerPermissionsUtilisateur();

this.chargerRoleUtilisateur();
console.log(this.rolesService.getRoles());
}

chargerRoleUtilisateur() {
    const roleMetier: Role = new Role();
    roleMetier.nom = 'ADMIN';
    roleMetier.permissions = ['seeContent'];

    this.permissionsService.addPermission(['seeContent']);

    this.rolesService.addRole(roleMetier.nom, roleMetier.permissions);
}

或者，您可以将 chargerPermissionsUtilisateur() 方法更改为：

this.permissionsService.loadPermissions(['seeContent']);

并更改您的ngOnInit 的顺序

this.chargerPermissionsUtilisateur();
this.chargerRoleUtilisateur();

https://stackblitz.com/edit/angular-poc-ngx-permissions-qxi4mz

Answer 2

使用 8.1.1 版，可以在一行中完成

 this.rolesService.addRoleWithPermissions('ADMIN', ['seeContent']);