路由守衛

守衛，顧名思義，必須滿足一定的條件得到許可方可通行，否則拒絕訪問或者重定向。Angular中路由守衛可以借此處理一些權限問題，通常應用中存儲了用戶登錄和用戶權限信息，遇到路由導航時會進行驗證是否可以跳轉。

4種守衛類型

按照觸發順序依次為：canload（加載）、canActivate（進入）、canActivateChild（進入子路由）和canDeactivate（離開）。

一個所有守衛都是通過的守衛類：

import { Injectable } from '@angular/core';import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, CanLoad, CanDeactivate} from '@angular/router';import { Route } from '@angular/compiler/src/core';import { NewsComponent } from '../component/news/news.component';@Injectable({ providedIn: 'root' })export class AuthGuard implements CanActivate, CanActivateChild, CanLoad, CanDeactivate<any> { constructor(  private router: Router ) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {  // 權限控制邏輯如 是否登錄/擁有訪問權限  console.log('canActivate');  return true; } canDeactivate(  component: NewsComponent,  currentRoute: ActivatedRouteSnapshot,  currentState: RouterStateSnapshot,  nextState: RouterStateSnapshot) {  console.log('canDeactivate');  return true; } canActivateChild() {  // 返回false則導航將失敗/取消  // 也可以寫入具體的業務邏輯  console.log('canActivateChild');  return true; } canLoad(route: Route) {  // 是否可以加載路由  console.log('canload');  return true; }}

app-routing.module.ts

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { ErrorComponent } from './error/error.component';import { AuthGuard } from './core/auth-guard';const routes: Routes = [ // 一般情況很少需要同時寫多個守衛，如果有也是分開幾個文件（針對復雜場景，否則一般使用canActivated足夠） {  path: '',  canLoad: [AuthGuard],  canActivate: [AuthGuard],  canActivateChild: [   AuthGuard  ],  canDeactivate: [AuthGuard],  loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) }, {  path: 'error',  component: ErrorComponent,  data: {   title: '參數錯誤或者地址不存在'  } }, {  path: '**',  redirectTo: 'error',  pathMatch: 'full' }];@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }

使用場景分析

1.canLoad

默認值為true，表明路由是否可以被加載，一般不會認為控制這個守衛邏輯，99.99%情況下，默認所有app模塊下路由均允許canLoad

2.canActivate

是否允許進入該路由，此場景多為權限限制的情況下，比如客戶未登錄的情況下查詢某些資料頁面，在此方法中去判斷客戶是否登陸，如未登錄則強制導航到登陸頁或者提示無權限，即將返回等信息提示。