浅谈Angular路由守卫
引言
在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。
当希望用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，如果在Angular中应该怎么做呢？
其实Angular路由守卫属性可以帮我们做更多有意义的事，而且非常简单。
什么是路由守卫？
Angular 的 Route 路由参数中除了熟悉的 path、component 外，还包括四种是否允许路由激活与离开的属性。
canActivate
控制是否允许进入路由。
canActivateChild
等同 canActivate，只不过针对是所有子路由。
canDeactivate
控制是否允许离开路由。
canLoad
控制是否允许延迟加载整个模块。
例如：
{ path: 'logics', loadChildren: './logics/logics.module#LogicsModule', canLoad: [ AuthGuard ] }
这四个属性非常好理解，而且作用各自不同。然后当进入与离开能够有效控制权时，对于前面我提到的若干问题，就可以非常好的处理。
如何创建？
四个属性虽然名称不同，但其基本的使用方式非常相近。四种不同守卫方式有者四个不同的接口与之相对应。
| 属性名 | 接口名 |
|---|---|
| canActivate | CanActivate |
| canActivateChild | CanActivateChild |
| canDeactivate | CanDeactivate<TComponent> |
| canLoad | CanLoad |
canDeactivate 需要指明具体的组件类名以外，其他接口只是将首字母大写而已。假定需要一个某个角色才能访问某些路由，就需要一个 CanActivate 守卫类。
@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();
});
}
}
每种接口要都需要相应的实现某个方法，就上而论，继承 CanActivate 并实现一个叫 canActivate 的方法；且返回一个布尔类型的值。
四种类型守卫接口都返回一个布尔类型值，其实从这四种参数的名称 can 开头就不然理解。
最后，把它运用到相应的路由上即可，例如：
{ path: 'admin', component: GuardAdminComponent, canActivate: [ CanAdminProvide ] }
当然，别忘记注册 CanAdminProvide 类。
一些实践
离开时提醒
四种守卫只有一种离开类型 canDeactivate，因此：
@Injectable()
export class CanLeaveProvide implements CanDeactivate<GuardComponent> {
constructor (private confirmSrv: NzModalService) {}
canDeactivate(
component: GuardComponent,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState?: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
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.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 会提示 权限不足 的字样。
总结
路由守卫对于权限控制非常便利，当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式，而二者的结合可以极大的改善权限控制埋点的代码量。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍 AngularJS控制器,这里对 AngularJS控制器的知识详细讲解,并提供实例代码有需要的小伙伴可以参考下2016-07-07
这篇文章主要介绍了AngularJS的通信机制,AngularJS是非常具有人气的JavaScript库,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了angular实现表单验证及提交功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
详解AngularJs路由之Ui-router-resolve（预加载）
本篇文章主要介绍了详解AngularJs路由之Ui-router-resolve（预加载），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Angular组件库ng-zorro-antd实现radio单选框选择
这篇文章主要为大家介绍了Angular组件库ng-zorro-antd实现radio单选框取消选择实现问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本篇文章主要介绍了从零搭建一个angular4.0项目，主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了Angular8 实现table表格表头固定效果，表头固定，内部实现滚动条效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要为大家介绍了Angular重构数组字段的解决方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Angular4中的checkbox 全选按钮启用禁用的相关资料,需要的朋友可以参考下2023-03-03
最新评论