Angular之ngx-permissions的管理权限
介绍
让我们开始先说说什么是权限？权限是指用户可以在应用程序中畅通无阻的能力，所以你要考虑你的程序需要那些权限，分别对应那一部分。
注意：
此库只适用于前端的简单防护，真正发挥作用的是后端，不仅仅要做好前端验证，后端更为重要！！！！否则你的web程序很容易被攻破。
定义权限
ngx-permissions 允许设置不同逻辑的 permissions。要做到这样可以使用NgxPermissionsService，它可以让你自由操纵他们。
单个权限的设定
通过 NgxPermissionsService 的 addPermission 方法进行添加。
ngOnInit() {
// 可以传递单个字符串
this.permissionsService.addPermission('changeSomething');
// 也可以传递字符串数组
this.permissionsService.addPermission(['changeSomething', 'anotherAlso']);
// 控制某个权限的逻辑，默认是返回true的，你也可以返回false,或者更复杂的逻辑，这取决于你的业务逻辑。
this.permissionsService.addPermission('changeSomething', () => {
return true;
});
}
在html中就可以这样使用了
<ng-template ngxPermissionsOnly="changeSomething">
<div>You can see this text congrats 4</div>
</ng-template>
从上的代码可以看出addPermission函数和loadPermissions没有什么区别嘛？答案当然是并不是，后面会答案。
this.permissionsService.addPermission('anotherPermissions', (permissionName, permissionsObject) => {
return !!permissionsObject[permissionName];
});
-
permissionName为权限的名称，例如上的 changeSomething、anotherPermissions。 -
permissionsObject为存储所有权限的一个数据结构，权限名称是他内部的一个key，如果存在代表此权限存在。如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XJvowLxw-1581216587096)(https://note.youdao.com/yws/res/69361/WEBRESOURCE10d13a50f0277450dd45e12626419f14)]
双感叹号 “!!” 是javascript的语法，将数据强制转换为boolean类型。
强调一下，addPermission方法的第二个参数是一个回调函数，此函数必须返回Valid或Invalid，也就是true或false，但是也可以是Promise.resolve()或Promise.reject()。
多个权限的设定
定义多个权限需要使用 loadPermissions，这也是它和 addPermission 的重大区别所在。
例如：
const permissions = ['listMeeting', 'seeMeeting', 'editMeeting', 'deleteMeeting']
NgxPermissionsService.loadPermissions(permissions)
NgxPermissionsService.loadPermissions(permissions, (permissionName, permissionStore) => {
return !!permissionStore[permissionName];
})
上面代码中的 NgxPermissionsService 是 NgxPermissionsService 对象，你需要在构造函数中导入。
在程序启动之前加载权限
APP_INITIALIZER定义在angular/core中。它这样使用:
import { APP_INITIALIZER } from '@angular/core';
@NgModule({
providers: [
DictionaryService,
{
provide: APP_INITIALIZER,
useFactory: (ds: DictionaryService, ps: NgxPermissionsService ) => function() {return ds.load().then((data) => {return ps.loadPermissions(data)})},
deps: [LoadService, NgxPermissionsService],
multi: true
}]
})
export class AppModule { }
删除权限
你可以通过NgxPermissionsService删除所有的权限。例如：
NgxPermissionsService.flushPermissions();
一般在退出登录的时候会使用。
另外你也可以删除单个权限，例如：
NgxPermissionsService.removePermission('user');
监控权限
// 直接过去权限
var permissions = NgxPermissionsService.getPermissions();
// 订阅权限事件
NgxPermissionsService.permissions$.subscribe((permissions) => {
console.log(permissions)
})
可以通过NgxPermissionsService 获取当前的所有权限，也可以订阅权限对象，这样在每次执行loadPermissions、addPermission时都会触发这个订阅事件。
