@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 会提示 权限不足 的字样。
总结
路由守卫对于权限控制非常便利，当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式，而二者的结合可以极大的改善权限控制埋点的代码量。