Angular路由守卫使用步骤详解

import { CanActivate } from "@angular/router";
export class LoginGuard implements CanActivate{
 canActivate(){
 let loggedIn :boolean= Math.random()<0.5;
 if(!loggedIn){
 console.log("用户未登录");
 }
 return loggedIn;
 }
}

const routes: Routes = [
 { path: '', redirectTo : 'home',pathMatch:'full' }, 
 { path: 'chat', component: ChatComponent, outlet: "aux"},//辅助路由
 { path: 'home', component: HomeComponent },
 { path: 'product/:id', component: ProductComponent, children:[
 { path: '', component : ProductDescComponent },
 { path: 'seller/:id', component : SellerInfoComponent }
 ] ,canActivate: [LoginGuard]},
 { path: '**', component: Code404Component }
];

import { CanDeactivate } from "@angular/router";
import { ProductComponent } from "../product/product.component";
export class UnsaveGuard implements CanDeactivate<ProductComponent>{
 //第一个参数 范型类型的组件
 //根据当前要保护组件 的状态 判断当前用户是否能够离开
 canDeactivate(component: ProductComponent){
 return window.confirm('你还没有保存，确定要离开吗？');
 }
}

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { Product } from "../product/product.component";
@Injectable()
export class ProductResolve implements Resolve<Product>{
 constructor(private router: Router) {
 }
 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
 let productId: number = route.params["id"];
 if (productId == 2) { //正确id
 return new Product(1, "iPhone7");
 } else { //id不是1导航回首页
 this.router.navigate(["/home"]);
 return undefined;
 }
 }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { Code404Component } from './code404/code404.component';
import { ProductDescComponent } from './product-desc/product-desc.component';
import { SellerInfoComponent } from './seller-info/seller-info.component';
import { ChatComponent } from './chat/chat.component';
import { LoginGuard } from './guard/login.guard';
import { UnsaveGuard } from './guard/unsave.guard';
import { ProductResolve } from './guard/product.resolve';
const routes: Routes = [
 { path: '', redirectTo : 'home',pathMatch:'full' }, 
 { path: 'chat', component: ChatComponent, outlet: "aux"},//辅助路由
 { path: 'home', component: HomeComponent },
 { path: 'product/:id', component: ProductComponent, children:[
 { path: '', component : ProductDescComponent },
 { path: 'seller/:id', component : SellerInfoComponent }
 ] ,
 // canActivate: [LoginGuard],
 // canDeactivate: [UnsaveGuard],
 resolve:{ //resolve是一个对象
 product : ProductResolve //想传入product,product由ProductResolve生成
 }},
 { path: '**', component: Code404Component }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule],
 providers: [LoginGuard,UnsaveGuard,ProductResolve]
})
export class AppRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
 selector: 'app-product',
 templateUrl: './product.component.html',
 styleUrls: ['./product.component.css']
})
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){
 }
}

<p class="product">
 <p>
 这里是商品信息组件
 </p>
 <p>
 商品id是: {{productId}}
 </p>
 <p>
 商品名称是: {{productName}}
 </p>
 
 <a [routerLink]="['./']">商品描述</a>
 <a [routerLink]="['./seller',99]">销售员信息</a>
 <router-outlet></router-outlet>
</p>