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 就有用了。假定管理员角色才能加载管理模块下所有管理功能以及某个管理页面，基于接口多继承的特性，可以同时继承这两个接口。
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
