Angular4 第三章（下）路由守卫

路由守卫，实际意义是拦截器，在你进入路由或离开路由执行一些逻辑。

1.路由守卫有三种：

（1）CanActivate:处理导航到某路由的情况

（2）CanDeactivate:处理从当前路由离开的情况

（3）Resove 在路由激活之前获取路由数据

2.路由守卫实战：

【CanActivate】

第一步：写出CanActivate路由守卫的验证规则

创建文件 app/guard/permission.guard.ts

import {CanActivate} from '@angular/router';
export class PermissionGuard implements CanActivate{
  canActivate(){
      var hasPermission: boolean = Math.random()  < 0.5;
      if( !hasPermission )
      {
            console.log("用户无权访问股票详情");
      }
      return hasPermission;
  }
}

第二步:将路由守卫配置到路由配置，在app-routing.module.ts

import {StockResolve} from './guard/stock.resolve';
const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent  }, // 默认展示HomeComponnet
  {path: 'consult', component: ConsultComponent, outlet: 'aux'},
   // SellerListComponen只能能显示在aux的插座上
  {
    path: 'stock/:id', component: StockComponent, data: [{isPro: true}],
     children: [
        {path: '', component: BuyerListComponent},
        {path: 'seller/:id', component: SellerListComponent}

     ],
      canActivate: [PermissionGuard],
  },

  {path: '**', component: Code404Component}
];

第三步：需要在app.module.ts中提供器上声明   PermissionGuard

 providers: [PermissionGuard],

此时 CanActivate路由就此完成。

【CanDeactivate】

第一步：写出CanDeactivate路由守卫的验证规则

 （1）创建文件 app/guard/focus.guard.ts

import {CanDeactivate} from '@angular/router';
import {StockComponent} from '../stock/stock.component';
export class FocusGuard implements CanDeactivate<StockComponent> {
    //StockComponent 表示保护的组件，可以拿到当前的组件
    canDeactivate(component: StockComponent) {
        if ( component.isFocus() ) {
            return true;
        }else {
            return window.confirm( '不关注就离开吗？' );
        }
    }
  }

（2）需要在StockComponent组件中声明一个isFocus()方法

export class StockComponent implements OnInit {
  private focus = false;
  constructor(private routeInfo: ActivatedRoute) {}

  ngOnInit() {

  }
  isFocus() {
    return this.focus;
  }
}

（3）StockComponent 的模板上

<input type="button" (click)="focus=true" value="关注" />

第二步:将路由守卫配置到路由配置，在app-routing.module.ts

const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent  }, // 默认展示HomeComponnet
{path: 'consult', component: ConsultComponent, outlet: 'aux'},
 // SellerListComponen只能能显示在aux的插座上
{
  path: 'stock/:id', component: StockComponent, data: [{isPro: true}],
   children: [
      {path: '', component: BuyerListComponent},
      {path: 'seller/:id', component: SellerListComponent}

   ],
    canActivate: [PermissionGuard],
    canDeactivate: [FocusGuard]
},

{path: '**', component: Code404Component}
];

第三步：需要在app.module.ts中提供器上声明  FocusGuard

 providers: [PermissionGuard,FocusGuard],

【Resove】

1.resove守卫要解决的问题：以Stock组件为例

（1）stock.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  public stock: Stock;
  constructor() {}
  ngOnInit() {
  
  }
}

export class Stock {
  constructor(public id: number, public name: string) {}
}

（2）模板中

<p>股票stock.id是{{stock.id}}</p>
<p>股票stock.name是{{stock.name}}</p>

此时会报错因为stock为空2.解决问题：

Resove守卫在进入组件之前将stock赋值

第一步：写出Resove路由守卫的验证规则

 （1）创建文件 app/guard/stock.resove.ts

import { Router, Resolve,  ActivatedRouteSnapshot,  RouterStateSnapshot} from '@angular/router';
import {Stock} from '../stock/stock.component';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()  //使当前类支持依赖注入，@Componnent()继承了@Injectable()
export class StockResolve implements Resolve<Stock> {
  constructor( private router: Router){
     //Router 类型的对象可以使用导航 this.router.navigate(['/home']);
  }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Stock| Observable<Stock> |Promise<Stock>{
    // ActivatedRouteSnapshot类型的对象可以取到路由参数
     var id = route.params['id'];
     if ( id == 1) {
         return new Stock(1,"IBM");
     }else {
       this.router.navigate(['/home']);
       return undefined;
     }
  }
}

第二步:将路由守卫配置到路由配置，在app-routing.module.ts

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent  }, // 默认展示HomeComponnet
  {path: 'consult', component: ConsultComponent, outlet: 'aux'},
   // SellerListComponen只能能显示在aux的插座上
  {
    path: 'stock/:id', component: StockComponent, data: [{isPro: true}],
     children: [
        {path: '', component: BuyerListComponent},
        {path: 'seller/:id', component: SellerListComponent}

     ],
    //  canActivate: [PermissionGuard],
    //  canDeactivate: [FocusGuard],
    resolve:{
      stock:StockResolve
    }

  },

  {path: '**', component: Code404Component}
];

第三步：需要在app.module.ts中提供器上声明  StockResove

 providers: [PermissionGuard,FocusGuard,StockResolve],

第四步：在stock.component.ts中执行给声明的stock对象赋值

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  public stock: Stock;
  constructor(private routeInfo: ActivatedRoute) {}

  ngOnInit() {
    this.routeInfo.data.subscribe((data:{stock:Stock})=>{
       this.stock=data.stock;
    })
  }
}

export class Stock {
  constructor(public id: number, public name: string) {}
}

此时 ：

( data : { stock : Stock })里面的stock是app-routing.module.ts中的

resolve: {stock:StockResolve}中的stock,Stock是类型