Angular之ngx-permissions的角色管理

Angular之ngx-permissions的角色管理

案例 demo https://stackblitz.com/edit/ngx-permissions-role

介绍

通过定义一个角色是一组指定的由特定用户组的鉴别能力（权限)。因此，例如用户或匿名的角色和权限不够。我们可以代表我们作为一组权限的角色应该是能够执行的用户角色。

定义角色

单个角色

通过NgxRolesService的addRole方法自定义角色在你的app内。

首先导入NgxRolesService服务：

import { NgxRolesService } from 'ngx-permissions';

然后需要在构造函数中导入。

constructor(private rolesService: NgxRolesService) {}

ngOnInit(): void {
    rolesService.addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB', 'permissionNameC', ...])
}

自定义角色认证逻辑：

rolesService.addRole('Guest', () => {
  return this.sessionService.checkSession().toPromise();
}); 

rolesService.addRole('Guest', () => {
  return true;
}); 

addRole函数的第一个参数为roleName，是角色名称字符串，第二个参数为transitionProperties ，是一个验证函数。这个函数的返回值为Valid或Invalid，即true|Promise.resolve() but it should not resolve false或[false|Promise.reject() or Promise.resolve(false)

addRole和addPermissions的使用方式是比较相似的。

rolesService
    // permissions are valid when checking if role is valid   
    .addRole('ADMIN', ['listEvents', 'editEvents']);  

rolesService.addRole('Guest', () => {
  return this.sessionService.checkSession().toPromise();
});  

多个角色

通过NgxRolesService服务的addRoles方法。

rolesService    
  // Or use your own function/service to validate role
  .addRoles({
    'USER': ['canReadInvoices'],
    'ADMIN': ['canReadInvoices','canEditInvoices','canUploadImages'],
    'GUEST': () => {
        return this.sessionService.checkSessions().toPromise();
    }
  });

角色与权限

注意，此方法暂时不可用！！！！

addRoles和addRole是不能导入权限的，我们可以通过addRoleWithPermissions函数导入角色和权限。

rolesService
  .addRoleWithPermissions('ROLE_NAME', ['permissionNameA', 'permissionNameB', 'permissionNameC', ...])

我们需要这样使用：

import { Component } from '@angular/core';
import { NgxRolesService } from 'ngx-permissions';
import { NgxPermissionsService } from 'ngx-permissions';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 8';

     constructor(private rolesService: NgxRolesService, private permissionsService: NgxPermissionsService) {}

    ngOnInit(): void {
      this.permissionsService.loadPermissions(['canShow', 'canEdit', 'canDelete']);
      this.rolesService.addRoles ({
        'ADMIN': ['canShow', 'canEdit', 'canDelete']
       } );
    }
}

删除角色

删除所有角色可以使用flushRoles方法。

NgxRolesService.flushRoles();

删除单个角色可以使用removeRole方法。

NgxRolesService.removeRole('USER');

获取所有角色

获得单个角色：

let role = NgxRolesService.getRole('roleName');

获取所有角色：

let roles = NgxRolesService.getRoles();

订阅角色对象：

this.rolesService.roles$.subscribe((data) => {
  console.log(data);
});

在每次添加、删除角色时都会触发这个事件，它是一个Observable对象。