当遇到以下场景时,需要考虑使用路由守卫:
- 该用户可能无权导航到目标组件。
- 可能用户得先登录(认证)。
- 在显示目标组件前,你可能得先获取某些数据。
- 在离开组件前,你可能要先保存修改。
- 你可能要询问用户:你是否要放弃本次更改,而不用保存它们?
守卫可以同步返回一个值,用来控制是否通行
- 如果它返回true,导航过程会继续
- 如果它返回 false,导航过程会终止,且用户会留在原地。
当时异步操作的时候,守卫可以返回:
Observable<boolean> 或者 Promise<boolean>,并且路由器(Router)会等待这个可观察对象被解析为true 或者false。
路由器可以支持多种守卫接口:
- 用CanActivate来处理导航到某路由的情况。
- 用CanActivateChild来处理导航到某子路由的情况。
- 用CanDeactivate来处理从当前路由离开的情况.
- 用Resolve在路由激活之前获取路由数据。
- 用CanLoad来处理异步导航到某特性模块的情况。
在分层路由的每个级别上,你都可以设置多个守卫。
- 路由器会先按照从最深的子路由由下往上检查的顺序来检查 CanDeactivate() 和 CanActivateChild() 守卫。
- 然后它会按照从上到下的顺序检查 CanActivate() 守卫。
- 如果特性模块是异步加载的,在加载它之前还会检查 CanLoad() 守卫。
如果任何一个守卫返回 false,其它尚未完成的守卫会被取消,这样整个导航就被取消了。
可以对已认证的用户或者具有特殊授权的用户访问某些路由,可以使用canActivate守卫。
使用CanActivate路由:
建立一个服务,继承CanActivate类,重写canActivate()方法。
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
//inject service here
constructor() {
}
canActivate() {
console.log('AuthGuard#canActivate called');
return true;
}
}
完成后,在路由配置里面添加:
canActivate:[AuthGuard]
其他守卫实现方法类似,只是作用的时间段不同。