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

Question

我在一個項目中使用 ngx-permissions ( https://www.npmjs.com/package/ngx-permissions )，以便我可以管理我的應用程序的用戶權限。

據我所知，我們可以在 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']);
  }

如您所見，我為我的角色 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

所以修改你的stackblitz：

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']);