Angular 8 - 如何授权权限而不是具有 ngx-permissions 的角色?

Angular 8 - How to authorize permissions instead of roles with ngx-permissions?

我在项目中使用 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']);
  }

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

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

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

我的问题是:

感谢您的建议!

您需要使用 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

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

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