angular2系统学习 - 路由与导航(4)

angular2系统学习 - 路由与导航(4)

1.路由守卫

路由守卫其实就是一种拦截机制，在进入离开视图等时的拦截行为。
路由守卫可以看作是挂在路由上连接视图组件的拦截器，在进入、离开视图等事件监听上触发拦截。
我们可以把每一个路由看成一个中间块，一边连接视图，一边连接守卫。
路由器支持多种守卫：

• 用CanActivate来处理导航到某路由的情况。
• 用CanActivateChild处理导航到子路由的情况。
• 用CanDeactivate来处理从当前路由离开的情况。
• 用Resolve在路由激活之前获取路由数据。
• 用CanLoad来处理异步导航到某特性模块的情况。

当触发守卫时内部返回true，则继续运行；返回false则停止导航。常用于权限控制。

守卫还可以告诉路由器导航到别处。

2.如何配置守卫？

这里先说下如何创建一个守卫；

2.1首先创建一个守卫服务，用Injectable装饰器装饰的类，我们需要哪种守卫，就在创建的守卫服务类后继承那种服务的接口

    export class GuardService implements CanActivate { }
继承接口以后，我们就要实现这个接口，将接口开头字母小写就是实现方法名。canActivate()，方法返回布尔值，表示是否继续导航。
实现守卫方法内的参数一般只有两个:
route: ActivatedRouteSnapshot  //包含了即将被激活的路由。
state: RouterStateSnapshot        //包含了该应用即将到达的状态。

import { Injectable } from '@angular/core';
import { CanActivate, //守卫，处理导航到某路由的情况。
         Router,
         ActivatedRouteSnapshot,  //
         RouterStateSnapshot, //
         CanActivateChild //守卫，处理导航到子路由的情况
         } from '@angular/router';

@Injectable()
export class Guard implements CanActivate{
    canActivate( route: ActivatedRouteSnapshot , state: RouterStateSnapshot){
        if(boolean) return true;
        else return false;
    }
}

到这里守卫服务就已经创建好了。

2.2将守卫挂接到路由。

在routing.module中，将守卫服务配置到路由数组中。

{
    path: '',
    component:ParAComponent,
    canActivate:[ GuardService ]
}

每个守卫在路由数组中都有相应的属性名。
一个路由项可以挂接多个路由守卫
在这里可以看到，ng2以路由为中心，将视图组件、守卫都捆绑到了路由数组中。

当路由导航至ParAComponent中时，会先进入守卫的实现方法中，如果方法返回true，则继续往下走；如果返回false，则不进入这个视图。