本文转载至：https://segmentfault.com/a/1190000010851032

引言

在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。

当希望用户离开一个正常编辑页时，要中断并提醒用户是否真的要离开时，如果在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 会提示 权限不足 的字样。

总结

路由守卫对于权限控制非常便利，当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式，而二者的结合可以极大的改善权限控制埋点的代码量。

angular2.0+之路由守卫相关推荐

路由守卫 AJAX,vue路由导航守卫和请求拦截以及基于node的token认证
#####什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的 ...
创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...
reactrouter4路由钩子_react router @4 和 vue路由详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
vue 声明周期函数_vue-router路由守卫-上
1. 为什么要使用路由守卫?什么是路由守卫? 第一次认识路由守卫:之前我做过的小项目里面,我们直接在浏览器网址的地方进行修改就能跳转页面,这是不安全的,因此就需要路由守卫,实现通过路由拦截,来判断用户 ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
Vue路由守卫（拦截）
要解决的问题:最近做项目时,发现不登录账号和密码,在浏览器的地址栏直接输入路径也能跳转页面,就聊一下路由守卫吧,也叫路由拦截,话不多少直接看操作解决方案:在登录成功后,设置一个sessionSto ...
vue2进阶篇：vue-router之“使用独享路由守卫”
文章目录 10.13路由守卫案例:将案例改为"使用独享路由守卫" 完整代码本人其他相关文章链接 10.13路由守卫注意点1: 前置路由守卫或者后置路由守卫中,to指代切换到哪 ...
使用路由守卫来写登录效果
美食杰项目的登录效果 1.使用element-ui写样式 <template><div class="login-section"><!-- :rul ...
vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录 Vue如何封装Axios请求 1 安装axios 2 封装代码 axios 应用方式 Vue 中的路由守卫使用演示 1 全局守卫 2 组件级守卫 3 单个路由独享的守卫 4 官网整个路由守 ...

angular2.0+之路由守卫