路由守衛(wèi)
使用場(chǎng)景
分三種方式
案例：
1德迹、CanActivate 路由守衛(wèi)用法
在app內(nèi)新增文件夾guard
新建login.guard.ts 模擬登陸狀態(tài)；
調(diào)用CanActivate接口揭芍，return 的值為true視為登陸成功，可以下一步路由
import {CanActivate} from "@angular/router";
/*實(shí)現(xiàn) CanActivate的接口*/
export class LoginGuard implements CanActivate{
canActivate(){
let loggedIn:boolean = Math.random() < 0.5;
if(!loggedIn){
console.log('用戶未登陸');
}
return loggedIn;
}
}
路由配置app-routing.module.ts如下 ：
....
{path:'product/:id',component:ProductComponent,children:[
{path:'',component:ProductDescComponent},
{path:'seller/:id',component:SellerInfoComponent},
],canActivate:[LoginGuard] },
....
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
/*依賴注入*/
providers:[LoginGuard],
})
....
2卸例、canDeactivate路由守衛(wèi)用法
在當(dāng)前路由離開前称杨， 做相關(guān)守衛(wèi)，如提供客戶還沒(méi)保存筷转，return值為true才通過(guò)姑原。
示例：新建unsaved.guard.ts文件
import {CanDeactivate} from "@angular/router";
import {ProductComponent} from "../product/product.component";
/* <ProductComponent> 是泛型寫法 */
export class UnsavedGuard implements CanDeactivate<ProductComponent>{
canDeactivate(component: ProductComponent){
return window.confirm("還沒(méi)有保存");
}
}
路由配置app-routing.module.ts如下 ：
...
{path:'product/:id',component:ProductComponent,children:[
{path:'',component:ProductDescComponent},
{path:'seller/:id',component:SellerInfoComponent},
],canActivate:[LoginGuard],
canDeactivate:[UnsavedGuard]
},
...
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
/*依賴注入*/
providers:[LoginGuard,UnsavedGuard],
})
3、Resolve 守衛(wèi)呜舒，在路由激活前獲取數(shù)據(jù)給模塊渲染
3.1在guard中新建product.resolve.ts定義邏輯
import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from "@angular/router";
import {Product} from "../product/product.component";
import {Injectable} from "@angular/core";
@Injectable()
export class ProductResolve implements Resolve<Product>{
constructor(private router:Router){
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
let productId:number = route.params['id'];
if(productId == 1){
return new Product(1,'iPhone7');
}else{
this.router.navigate(['/home']);
return undefined;
}
}
}
3.2 在product組件中定義Product對(duì)象
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;//定義接收的ID變量
private productName:string;//定義接收的productName變量
constructor(private routeInfo:ActivatedRoute) { }
ngOnInit() {
/* 通過(guò)參數(shù)訂閱取得數(shù)據(jù) */
this.routeInfo.params.subscribe((param:Params)=>this.productId = param['id']);
this.routeInfo.data.subscribe((data:{product:Product})=>{
this.productId = data.product.id;
this.productName = data.product.name;
})
/*通過(guò) queryParams 方法取得參數(shù)快照*/
// this.productId = this.routeInfo.snapshot.params['id'];
}
}
3.3在product組件模板中定義輸出變量
<div class="product">
<p>
這是一個(gè)商品組件
</p>
<p>
查詢參數(shù)傳遞過(guò)來(lái)的組件ID：{{productId}}
</p>
<p>
商品名稱是：{{productName}}
</p>
<br>
<hr>
<a [routerLink]="['./']">商品的描述</a>
<a [routerLink]="['./seller',99]">銷售員信息</a>
<router-outlet></router-outlet>
</div>
3.4 在app-routing.module.ts中定義調(diào)用
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 {UnsavedGuard} from "./guard/unsaved.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},
],resolve:{
product:ProductResolve
}
},
/* 路由配 通配符路由通常放最后面 */
{path:'**',component:Code404Component},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
/*依賴注入*/
providers:[LoginGuard,UnsavedGuard,ProductResolve],
})
export class AppRoutingModule { }
路由部分源碼：
鏈接: https://pan.baidu.com/s/1bBZYJs 密碼: ukwe
