这里只是我个人的笔记。主要是为了记录和整理现在的想法和思路。可能不适合按照文章的内容来实现具体的功能。
有两个部分组成。
第一个部分是permissionService。
作用是当获取到用户权限列表后，检测用户是否需要检测权限。不需要的话就直接进行显示。需要的话就交给directive进行权限验证。
第二部分是permissionDirective。
作用是控制显示。检测用户传入的权限列表与设置的权限列表是否匹配。
这个控件有两个职责。按照职责单一的原则应该拆分。不过现在代码不是很复杂。
所以暂时不进行拆分。
先看service部分
@Injectable()
export class PermissionService{
permission$ = new Subject<string[]>();
directDisplay$ = new Subject();
setPermissions(permissions:string[]){
if(this.checkAdminPermissions(permissions)){
this.permission$.next(permissions);
}
}
//未来检测管理员权限可能会有更加复杂的情况。这个方法会不断的扩充。
checkAdminPermissions(permissions){
if(permissions){
if(permissions.length>0){
//一些校验管理员是否有特殊权限的方法，如果有的话，则直接显示
//否则就进行权限简则
if(someFunction(xxx)){
this.drectDisplay$.next();
return false;
}else{
return true;
}
}
}
console.error("管理员未配置权限");
return false;
}
}
为什么要使用checkAdminPermissions这个方法。这样的做法其实风险很大。最好的做法就是没哟特权，所有人权限列表分配了什么权限就只能做该权限的事情。这样最直接明白也很安全。
但是一些需求是某个管理员创建了一个活动，他需要一些其他人一起协作处理这个活动。这些人全部是动态添加的。
有些人有权限看一部分内容，另一些人有权限看另一些内容。
而且有这样的需求的模块还有很多。
一种解决方案是将模块内，所有功能全部设置成权限。然后进行配置。
但是这样做一个缺点是，其实对于管理员进入模块A的时候，它并不关心这个管理员在模块B中有哪些权限。单纯适应一个permission列表，就会将所有内容混在一起。
我们增加一个方法出来，这样特殊的权限方法交给特殊的方法去处理。未来设置交给特殊的类去出去都是可以的。
如果没有这么复杂的需求，可以使用比较简单的代码：
@Injectable()
export class PermissionService{
permission$ = new Subject<string[]>();
setPermissions(permissions:string[]){
this.permission$.next(permissions);
}
}
这个代码非常简便了，不过还是需要一个service这样就可以避免每个引用下面这段代码：
[adminPermissions]="admin?.permissions"
现在我们来看directive的实现：
介绍下四种权限匹配类型。
- permissionOr
只要有只要管理有拥有配置权限中的一个，就可以显示。 - permissionAnd
管理员必须拥有配置权限中的所有权限，才能显示。 - permissionExcept
除了配置的权限，其他权限都可以显示。
@Input() set permissionOr(permissions:string[]){
this._permissions = permissions;
this._permissionType = 1;
this.permissionFunction = this.permissionOrFunc;
this.checkPermission();
}
@Input() set permissionAnd(permissions:string[]){
this._permissions = permissions;
this._permissionType = 2;
this.permissionFunction = this.permissionAndFunc;
this.checkPermission();
}
@Input() set permissionExcept(permission:string){
this._permissions = [];
this._permissions.push(permission);
this._permissionType = 3;
this.permissionFunction = this.permissionExceptFunc;
this.checkPermission();
}
我们使用一个this.permissionFunction变量才记录要执行哪个具体的校验方法，避免在this.checkPermission()方法中if else 语句。
permissionOrFunc(adminPermissions:string[]){
let authorised = false;
adminPermissions.forEach(str=>{
this._permissions.forEach(per=>{
if(str==per){
authorised = true;
return;
}
})
});
this.permissionAuthorised(authorised);
}
permissionAndFunc(adminPermissions:string[]){
let authorised = true;
//如果管理员的权限少于需要的权限，则直接返回false
if(adminPermissions.length<this._permissions.length){
this.permissionAuthorised(false);
return;
}
this._permissions.forEach(per=>{
let subAuth = false;
adminPermissions.forEach(str=>{
if(str==per){
subAuth = true;
return;
}
})
if(!subAuth){
authorised = false;
return;
}
});
this.permissionAuthorised(authorised);
}
permissionExceptFunc(adminPermissions:string[]){
let authorised = true;
adminPermissions.forEach(per=>{
this._permissions.forEach(str=>{
if(per==str){
authorised = false;
return;
}
})
})
this.permissionAuthorised(authorised);
}
三个方法的具体实现，就是检查两个数组是否有匹配的项目。
如果有更好的方法，欢迎交流。
这里的方法就其实可以分离出一个新的类来处理。这样我们每个类的职责都明确且单一。
下面是控制是否显示内容的方法。所有校验权限的方法执行结束后都要调用这个方法。
checkPermission(){
if(this._permissions){
if(this._permissions.length>0){
this.setPermission$.next();
//避免输出错误提醒。
return;
}
}
console.error("没有配置要检测的权限");
}
构造函数，在这里与service交流数据
constructor(private permissionService:PermissionService,
private viewContainer: ViewContainerRef,
private templateRef: TemplateRef<any>
) {
zip(this.permissionService.permission$,this.setPermission$).subscribe(res=>{
//admin的permissions可能是第一个值，也可能是第二个值。只可能是其中一个值;
let adminPermissions = res[0]? res[0]:res[1];
this.permissionFunction(adminPermissions);
});
//一些特殊情况，绕过检测，直接显示
this.permissionService.directDisplay$.subscribe(()=>{
this.permissionAuthorised(true);
});
}
zip(this.permissionService.permission$,this.setPermission$).subscribe(res=>{
//admin的permissions可能是第一个值，也可能是第二个值。只可能是其中一个值;
let adminPermissions = res[0]? res[0]:res[1];
this.permissionFunction(adminPermissions);
});
permissionService.permission代表指令获取了配置的权限。
只有两个参数都传进来以后才进行校验。所以用zip将两个流合并。
this.permissionService.directDisplay$.subscribe(()=>{
this.permissionAuthorised(true);
});
这句代码就比较简单了，就是当serivce里的特殊校验生效的时候，直接显示内容。
@Directive({
selector:'[permissionOr],[permissionAnd],[permissionExcept]'
})
引用
<li *permissionOr="['gg','x']" nz-submenu>
.......
</li>
*permissionExcept="'o'"
*permissionAnd="['gg','x']"
网友评论