Angular的常用路由守衛(wèi)有5種，按照執(zhí)行順序：

①?CanLoad：進(jìn)入到當(dāng)前路由的時(shí)候觸發(fā)（若用戶沒有權(quán)限訪問，相應(yīng)的模塊并不會被加載。這里是指對應(yīng)組件的代碼）。
↓
② CanAcitivate：進(jìn)入到當(dāng)前路由的時(shí)候觸發(fā)（即使返回的是false，用戶并沒有權(quán)限訪問該路由，但是相應(yīng)的模塊會被加載）。
↓
③?CanActivateChild：剛剛進(jìn)入子路由觸發(fā)。
↓
④?Resolve：進(jìn)入當(dāng)前路由之后，離開之前觸發(fā)。
↓
⑤?CanDeactivate：離開當(dāng)前路由離開的時(shí)候觸發(fā)。?

① guard/CanLoad.guard.ts

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router, UrlSegment } from '@angular/router';@Injectable()
export class CanLoadGuard implements CanLoad {constructor(private router: Router) { }canLoad(route: Route,segments: UrlSegment[]) {console.log('【CanLoad守衛(wèi)：進(jìn)入當(dāng)前子路由】----------------------------------------', route, segments);return true;//進(jìn)入路由// return false;//中端路由}}

② guard/CanAcitivate.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';@Injectable({ providedIn: 'root' })//這個在該守衛(wèi)里面必須要，其余兩種守衛(wèi)中可以不需要
/* 沒有上面這句會報(bào)錯
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[CanAcitivateGuard -> CanAcitivateGuard -> CanAcitivateGuard]: 
NullInjectorError: No provider for CanAcitivateGuard!
NullInjectorError: R3InjectorError(AppModule)[CanAcitivateGuard -> CanAcitivateGuard -> CanAcitivateGuard]: 
NullInjectorError: No provider for CanAcitivateGuard! */export class CanAcitivateGuard implements CanActivate {constructor(private router: Router) { }// 這就是你們想要的路由守衛(wèi)canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot) {console.log('【CanActivate守衛(wèi)：進(jìn)入當(dāng)前路由】----------------------------------------', next, state);// 這里可以做各種路由判斷的騷操作，通常我們主要是判斷用戶登錄狀態(tài)// 判斷本地有沒有token，如果token有值，表示登錄成功，繼續(xù)跳轉(zhuǎn)if (localStorage.token) {return true;} else {//兄嘚！你都沒有登錄，乖乖去一下登錄頁面吧~this.router.navigate(['/login']);return false;}}
}

③ guard/CanActivateChild.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';@Injectable()
export class CanActivateChildGuard implements CanActivateChild {constructor(private router: Router) { }canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {console.log('【CanActivateChild守衛(wèi)：進(jìn)入當(dāng)前子路由】----------------------------------------', route, state);return true;//進(jìn)入路由// return false;//中端路由}
}

④ guard/Resolve.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { AppComponent } from '../app.component';@Injectable()
export class ResolveGuard implements Resolve<AppComponent> {constructor(private router: Router) { }resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): any {console.log('【Resolve守衛(wèi)：進(jìn)入當(dāng)前路由之后，離開之前】----------------------------------------', route, state);}}

⑤ guard/CanDeactivate.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanDeactivate, Router, RouterStateSnapshot } from '@angular/router';
import { AppComponent } from '../app.component';@Injectable()
export class CanDeactivateGuard implements CanDeactivate<AppComponent> {constructor(private router: Router) { }canDeactivate(component: AppComponent,currentRoute: ActivatedRouteSnapshot,currentState: RouterStateSnapshot,nextState?: RouterStateSnapshot) {console.log('【CanDeactivate守衛(wèi)：離開當(dāng)前路由】----------------------------------------', currentRoute, currentState, nextState);return confirm('一旦離開，未保存的內(nèi)容將丟失！');}
}

?app-routing.module.ts

import { CanLoadGuard } from './guard/CanLoad.guard';
import { CanAcitivateGuard } from './guard/CanAcitivate.guard';
import { AppComponent } from './app.component';
import { ResolveGuard } from './guard/Resolve.guard';
import { CanDeactivateGuard } from './guard/CanDeactivate.guard';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Resolve, Route, UrlSegment } from '@angular/router';
import { HomeComponent } from './com/home/home.component';
import { LoginComponent } from './com/login/login.component';
import { CanActivateChildGuard } from './guard/CanActivateChild.guard';
import { ChildComponent } from './com/home/child/child.component';const routes: Routes = [{path: '',component: AppComponent,},{path: 'home',component: HomeComponent,canLoad: [CanLoadGuard],//順序1(剛進(jìn)入路由，還未加載組件)canActivate: [CanAcitivateGuard],//順序2(剛進(jìn)入路由，部分組件加載)canActivateChild: [CanActivateChildGuard],//順序3(剛剛進(jìn)入子路由)(必須加上這個，否則會報(bào)錯)resolve: { data: ResolveGuard },//順序4(進(jìn)入路由后)(必須加上這個，否則會報(bào)錯)canDeactivate: [CanDeactivateGuard],//順序5(離開路由)children: [{path: 'child',component: ChildComponent,}]},{path: 'login',component: LoginComponent,},
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule],providers: [/* 【CanActivate 和 CanLoad的區(qū)別】CanActivate：即使返回的是false，用戶并沒有權(quán)限訪問該路由，但是相應(yīng)的模塊會被加載。CanLoad：若用戶沒有權(quán)限訪問，相應(yīng)的模塊并不會被加載。這里是指對應(yīng)組件的代碼。*/CanLoadGuard,//順序1(剛進(jìn)入路由，還未加載組件)CanAcitivateGuard,//順序2(剛進(jìn)入路由，部分組件加載)CanActivateChildGuard,//順序3(剛剛進(jìn)入子路由)(必須加上這個，否則會報(bào)錯)ResolveGuard,//順序4(進(jìn)入路由后)(必須加上這個，否則會報(bào)錯)CanDeactivateGuard,//順序5(離開路由)]
})
export class AppRoutingModule { }

訪問localhost:4200/home打開F12查看提示：?

app.component.html

<router-outlet></router-outlet>

在home里面寫一個按鈕點(diǎn)擊跳轉(zhuǎn)到localhost/,然后打開F12查看

app/home/home.component.ts?

import { Router } from '@angular/router';
...
constructor(public router: Router) { }
...

app/home/home.component.html

<button (click)="router.navigate(['/home/child'])">跳轉(zhuǎn)到child，F12去看看CanActivateChild路由守衛(wèi)結(jié)果</button>
<br><br>
<button (click)="router.navigate(['/login'])">跳轉(zhuǎn)到login，F12去看看CanDeactivate路由守衛(wèi)結(jié)果</button>

總結(jié)

以上是生活随笔為你收集整理的【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。