Angular路由守卫

路由守卫

简介

目前,任何用户都能在任何时候导航到任何地方,对于大部分应用,这样是存在安全问题的,某些用户可能无权导航到目标组件,需要先登录(认证)

在显示目标组件前，可能需要先获取某些数据。

在离开组件前，可能要先保存修改.需要询问用户:是否要放弃本次更改,而不用保存它们?

对于上述这些场景问题,往往需要在路由配置中添加守卫,进行处理.

返回值

守卫通过返回一个值，以控制路由器的行为：

• 如果它返回 true，导航过程会继续

• 如果它返回 false，导航过程就会终止，且用户留在原地。

• 如果它返回 UrlTree，则取消当前的导航，并且开始导航到返回的这个 UrlTree.

守卫还可以告诉路由器导航到别处，这样也会取消当前的导航。要想在守卫中这么做，就要返回 false;

守卫可以用同步的方式返回一个布尔值,但在很多情况下,守卫无法用同步的方式给出答案.守卫可能会向用户问一个问题、把更改保存到服务器，或者获取新数据，而这些都是异步操作。因此，路由的守卫可以返回一个Observable Promise，并且路由器会等待这个可观察对象被解析为true或false。

提供给路由器的可观察对象还必须能结束,否则,导航就不会继续.

守卫接口

路由器可以支持多种守卫接口：

   * 用CanActivate来处理导航到某路由的情况。

   * 用CanActivateChild来处理导航到某子路由的情况。

   * 用CanDeactivate来处理从当前路由离开的情况.

   * 用Resolve在路由激活之前获取路由数据。

   * 用CanLoad来处理异步导航到某特性模块的情况。

在分层路由的每个级别上,你都可以设置多个守卫,上面提到过的空路由,在这里会可能发挥很好的作用

路由器会先按照从最深的子路由 由下往上检查的顺序来检查CanDeactivate() 和CanActivateChild() 守卫.然后它会按照从上到下的顺序检查CanActivate()守卫. 如果特性模块是异步加载的,在加载它之前还会检查CanLoad()守卫. 如果任何一个守卫返回 false,其它尚未完成的守卫会被取消,这样整个导航就被取消.

使用

• 生成一个守卫

//添加一个auth守卫
ng generate guard auth    (简写ng g g auth/auth)

生成的守卫会自动实现canactivate,若异步加载模块的，还需要实现CanLoad
在守卫里进行安全的逻辑设置，可以用与服务结合实现

export class AuthGuard implements CanActivate{}

• 添加进路由（假设访问info界面需要登录）

{ path: 'info', canActivate: [AuthGuard], component: WorkComponent },