Angular自定义permission directive

这里只是我个人的笔记。主要是为了记录和整理现在的想法和思路。可能不适合按照文章的内容来实现具体的功能。

有两个部分组成。
第一个部分是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 $,代表permissionService传进来管理员的权限后。 this.setPermission$ 代表指令获取了配置的权限。
只有两个参数都传进来以后才进行校验。所以用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']"