Angular路由守卫

情景：

    只有等用户已经登录并拥有某些权限时才能进入某些路由。

    一个由多个表单组件组成的导向，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。

    当用户未执行保存操作而试图离开当前导航时提醒用户。

分层路由介绍：

　　CanActivate：处理导航到某路由的情况

　　CanDeactivate：处理从当前路由离开的情况

　　Resolve：在路由激活之前获得路由数据

（　CanActivateChild：处理导航到某子路由的情况

        CanLoad：处理异步导航到某特性模块的情况   ）

CanActivate步骤：

1. 新增一个ts文件：

login.guard.ts：

import { CanActivate } from '@angular/router';

export class LonginGuard implements CanActivate {
  canActivate() {
    // tslint:disable-next-line:prefer-const
    let loggedIn: boolean = Math.random() < 0.5;
    if (!loggedIn) {
      console.log('用户未登录');
    }
    return loggedIn;
  }
}

2. 在路由中添加CanActivate：

app-routing.module.ts：

const routes: Routes = [{
    path: 'product/:id',
    component: ProductComponent,
    // 添加这一行
    canActivate: [LonginGuard],
 }]

@NgModule({
  // 添加这一行
  providers: [LonginGuard]
})

CanDeactivate步骤：

1. 新增一个ts文件：

unsaveed.guard.ts：

import { CanDeactivate } from '@angular/router';
import { ProductComponent } from '../product/product.component';

export class UnsavedGuard implements CanDeactivate<ProductComponent> {
  canDeactivate(component: ProductComponent) {
    return window.confirm('你还没保存确定要离开吗？');
  }
}

2. 在路由中添加CanDeactivate：

app-routing.module.ts：

const routes: Routes = [
{
    path: 'product/:id',
    component: ProductComponent,
   // 添加这一行
    canDeactivate: [UnsavedGuard]
  }
];

@NgModule({
   // 添加这一行
  providers: [UnsavedGuard]
})

CanActivate 步骤：

const routes: Routes = [
{
    path: 'product/:id',
    component: ProductComponent,
   // 添加这一行
    canDeactivate: [UnsavedGuard]
  }
];

@NgModule({
   // 添加这一行
  providers: [UnsavedGuard]
})

Resolve步骤：

1. 新增一个ts文件：

product.resolve.ts：

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

@Injectable()
export class ProductResolve implements Resolve<Product> {

  constructor(private router: Router) {

  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Product> | Promise<Product> | Product {
    const productId: number = route.params['id'];

    if (productId == 1) {
      return new Product(1, 'iPhone7');
    } else {
      this.router.navigate(['/home']);
      return undefined;
    }
  }
}

2. 在路由中添加 resolve：

app-routing.module.ts：

const routes: Routes = [
{
    path: 'product/:id',
    component: ProductComponent,
   // 添加这一行
    resolve: {
      product: ProductResolve
    }
  }
];

@NgModule({
   // 添加这一行
  providers: [ProductResolve]
})

3. 设置Product组件来获取数据

product.component.ts：

export class ProductComponent implements OnInit {

  private productId: number;

  private productName: String;

  constructor(private routeInfo: ActivatedRoute) { }

  ngOnInit() {   
this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
    this.routeInfo.data.subscribe((data: { product: Product }) => {
      this.productId = data.product.id;
      this.productName = data.product.name;
    });
  }

}

export class Product {
  constructor(public id: number, public name: String) {
  }
}