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
时都会触发这个订阅事件。