Route Resolve Guard

当遇到以下场景时,需要考虑使用路由守卫:

  • 该用户可能无权导航到目标组件。
  • 可能用户得先登录(认证)。
  • 在显示目标组件前,你可能得先获取某些数据。
  • 在离开组件前,你可能要先保存修改。
  • 你可能要询问用户:你是否要放弃本次更改,而不用保存它们?

守卫可以同步返回一个值,用来控制是否通行

  • 如果它返回true,导航过程会继续
  • 如果它返回 false,导航过程会终止,且用户会留在原地。

当时异步操作的时候,守卫可以返回:
Observable 或者 Promise,并且路由器(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]

其他守卫实现方法类似,只是作用的时间段不同。

你可能感兴趣的:(Route Resolve Guard)