constructor(private userSrv: UserService,private msg: NzMessageService) {}
canActivate(
route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean | Observable | Promise {
return new Observable((observer) => {
// 拥有 admin 角色
if (this.userSrv.hasRole('admin')) {
observer.next(true);
observer.complete();
return;
}
this.msg.error('授权不足');
observer.next(false);
observer.complete();
});
}
}
当然，别忘记注册 CanAdminProvide 类。
一些实践
离开时提醒
四种守卫只有一种离开类型 canDeactivate，因此：
{
constructor (private confirmSrv: NzModalService) {}
canDeactivate(
component: GuardComponent,currentRoute: ActivatedRouteSnapshot,currentState: RouterStateSnapshot,nextState?: RouterStateSnapshot): boolean | Observable | Promise {
return new Observable((observer) => {
this.confirmSrv.confirm({
title: '确认要离开吗？',content: '你已经填写了部分表单离开会放弃已经填写的内容。',okText: '离开',cancelText: '取消',onOk: () => {
observer.next(true);
observer.complete();
},onCancel: () => {
observer.next(false);
observer.complete();
}
});
});
}
}
这里返回的是一个 Observable 类型，意味者，在方法体内可以做任何事，只需要在结果中使用：
observer.complete();
来处理 Observable 的结果，就完成了整个流程。倘若，用户按浏览器后退或路由至其他页面时，会先收到一个提醒。
上面使用的 ng-zorro-antd 的确认对话框来提醒用户是否需要离开，若选择【离开】则跳转至目标路由，反之保留当前路由状态。
角色受限
这是再正常不过的功能，若用户进入一个未授权的路由时，甚至是某个迟延加载模块下所有路由；若用户无权限时，如何提醒用户。
此时 canActivate、canLoad 就有用了。假定@R_301_452@角色才能加载管理模块下所有管理功能以及某个管理页面，基于接口多继承的特性，可以同时继承这两个接口。
constructor(private userSrv: UserService,private msg: NzMessageService) {}
check(): Observable {
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 | Promise {
return this.check();
}
canLoad(route: Route): boolean | Observable | Promise {
return this.check();
}
}
因此，一个类中具有两种不同守卫的能力，更对于代码组织也更优雅。同样，需要运用到相应的路由当中。
此后，若一个普通员工账号要想进入（哪怕浏览器地址栏录入）未授权的路由 /auth 会提示 权限不足 的字样。
总结
路由守卫对于权限控制非常便利，当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式，而二者的结合可以极大的改善权限控制埋点的代码量。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/36828.html
