Angular 路由守衛

1. 路由

Angular路由: 可以控制頁面跳轉；可以在多視圖間切換；

2. 路由守衛

Angular路由守衛： 在進入或離開某路由時，用于判斷是否可以離開、進入某路由；；； return true 代表可以進入當前路由；return false 代表不可以進入當前路由，但可以進入自定義的路由；

3. 路由守衛與路由的關系

路由守衛只只能應用于路由項上；路由守衛可以應用于多個路由項；每個路由項也可以有多個路由守衛；

路由守衛通過實現如下接口來操作：

• canActivate： 控制是否允許進入路由。(通過return true/false決定)
• canActivateChild： 等同 canActivate，只不過針對是所有子路由。
• canDeactivate： 控制是否允許離開路由。
• canLoad： 控制是否允許延遲加載整個模塊。

4. 什么情況下，路由項上需要配置路由守衛屬性

當需要某些條件/某個身份才能進入的路由，這時需要在路由項上加入路由守衛屬性

5. 路由守衛的使用 （本例主要實現根據不同身份進入不同路由）

第一步: guard.service.ts - 定義路由守衛文件

• 第一種寫法: 返回Promise對象

@Injectable()
export class GuardService implements CanActivate {constructor(private router: Router, private _http: HttpClient) {}getIsAdmin() {return new Promise((resolve) => {this._http.get('/user/isAdmin').subscribe((resp: boolean) => {resolve(resp);});});}// 進入路由守衛canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {return this.getIsAdmin().then((isAdmin) => {if (isAdmin) { // 如果是管理員, 可以進入當前路由；return true;} else {// 如果不是管理員，不能進入當前路由，進入手動導航的ordinary路由；this.router.navigateByUrl('/ordinary');return false;}});}
}

• 第二種寫法: 返回Observable對象

@Injectable()
export class GuardService implements CanActivate {constructor(private router: Router, private _http: HttpClient) {}// 進入路由守衛canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {return this._http.get('/user/isAdmin').map((isAdmin) => {if (isAdmin) { // 如果是管理員, 可以進入當前路由；return true;} else {// 如果不是管理員，不能進入當前路由，進入手動導航的ordinary路由；this.router.navigateByUrl('/ordinary');return false;}});}
}

第二步: app.module.ts - 注冊路由文件

@NgModule({declarations: [AppComponent],providers: [GuardService],bootstrap: [AppComponent]
})

第三步: app.routing.ts - 給對應的路由項配置路由守衛

// 當導航到front時，需要進入路由守衛的canActivate類進行判斷是否可以進入此路由// 什么時候需要在路由項上加路由守衛？？當需要某些條件/某個身份才能進入的路由，這時需要在路由項上加入路由守衛屬性export const routes: Routes = [{path: '',component: AppComponent,children: [{path: '', redirectTo: 'front', pathMatch: 'full'},{path: 'front', component: FrontendComponent, canActivate: [GuardService]},{path: 'ordinary', component: OrdinaryComponent}]},
];
@NgModule({imports: [RouterModule.forRoot(routes, {useHash: true})],exports: [RouterModule]
})
export class RoutingModule {
}