@Injectable()
export class CanAdminProvide implements CanActivate {

  constructor(private userSrv: UserService, private msg: NzMessageService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return new Observable((observer) => {
      // 拥有 `admin` 角色
      if (this.userSrv.hasRole('admin')) {
        observer.next(true);
        observer.complete();
        return;
      }

      this.msg.error('授权不足');
      observer.next(false);
      observer.complete();
    });
  }

}

@Injectable()
export class CanLeaveProvide implements CanDeactivate<GuardComponent> {
  constructor (private confirmSrv: NzModalService) {}

  canDeactivate(
    component: GuardComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState"htmlcode">

// 允许
observer.next(true); 
// 或拒绝
// observer.next(false);

observer.complete();



来处理 Observable 的结果，就完成了整个流程。倘若，用户按浏览器后退或路由至其他页面时，会先收到一个提醒。
上面使用的 ng-zorro-antd 的确认对话框来提醒用户是否需要离开，若选择【离开】则跳转至目标路由，反之保留当前路由状态。



角色受限
这是再正常不过的功能，若用户进入一个未授权的路由时，甚至是某个迟延加载模块下所有路由；若用户无权限时，如何提醒用户。
此时 canActivate、canLoad 就有用了。假定管理员角色才能加载管理模块下所有管理功能以及某个管理页面，基于接口多继承的特性，可以同时继承这两个接口。


@Injectable()
export class CanAuthProvide implements CanActivate, CanLoad {

  constructor(private userSrv: UserService, private msg: NzMessageService) {}

  check(): Observable<boolean> {
    return new Observable((observer) => {
      if (this.userSrv.isLogin) {
        observer.next(true);
        observer.complete();
        return;
      }

      this.msg.error('权限不足');
      observer.next(false);
      observer.complete();
    });
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return this.check();
  }

  canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> {
    return this.check();
  }

}




因此，一个类中具有两种不同守卫的能力，更对于代码组织也更优雅。同样，需要运用到相应的路由当中。


{ path: 'auth', component: GuardAuthComponent, canActivate: [ CanAuthProvide ] },
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [ CanAuthProvide ] }


此后，若一个普通员工账号要想进入（哪怕浏览器地址栏录入）未授权的路由 /auth 会提示 权限不足 的字样。



总结
路由守卫对于权限控制非常便利，当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式，而二者的结合可以极大的改善权限控制埋点的代码量。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。