Route Resolve Guard

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

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

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

  • 如果它返回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]

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,798评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,888评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,498评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,050评论 3 119
  • 在写这篇文章的时候已经是下午五点,南方冬天的夜晚总是来临的特别早,给人一种时光飞逝的感觉。 室友都在实习都在忙着考...
    你好木子阅读 3,669评论 0 1