當遇到以下場景時,需要考慮使用路由守衛(wèi):
- 該用戶可能無權(quán)導(dǎo)航到目標組件。
- 可能用戶得先登錄(認證)。
- 在顯示目標組件前,你可能得先獲取某些數(shù)據(jù)。
- 在離開組件前,你可能要先保存修改。
- 你可能要詢問用戶:你是否要放棄本次更改,而不用保存它們?
守衛(wèi)可以同步返回一個值,用來控制是否通行
- 如果它返回true,導(dǎo)航過程會繼續(xù)
- 如果它返回 false,導(dǎo)航過程會終止,且用戶會留在原地。
當時異步操作的時候,守衛(wèi)可以返回:
Observable<boolean> 或者 Promise<boolean>,并且路由器(Router)會等待這個可觀察對象被解析為true 或者false。
路由器可以支持多種守衛(wèi)接口:
- 用CanActivate來處理導(dǎo)航到某路由的情況。
- 用CanActivateChild來處理導(dǎo)航到某子路由的情況。
- 用CanDeactivate來處理從當前路由離開的情況.
- 用Resolve在路由激活之前獲取路由數(shù)據(jù)。
- 用CanLoad來處理異步導(dǎo)航到某特性模塊的情況。
在分層路由的每個級別上,你都可以設(shè)置多個守衛(wèi)。
- 路由器會先按照從最深的子路由由下往上檢查的順序來檢查 CanDeactivate() 和 CanActivateChild() 守衛(wèi)。
- 然后它會按照從上到下的順序檢查 CanActivate() 守衛(wèi)。
- 如果特性模塊是異步加載的,在加載它之前還會檢查 CanLoad() 守衛(wèi)。
如果任何一個守衛(wèi)返回 false,其它尚未完成的守衛(wèi)會被取消,這樣整個導(dǎo)航就被取消了。
可以對已認證的用戶或者具有特殊授權(quán)的用戶訪問某些路由,可以使用canActivate守衛(wèi)。
使用CanActivate路由:
建立一個服務(wù),繼承CanActivate類,重寫canActivate()方法。
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
//inject service here
constructor() {
}
canActivate() {
console.log('AuthGuard#canActivate called');
return true;
}
}
完成后,在路由配置里面添加:
canActivate:[AuthGuard]
其他守衛(wèi)實現(xiàn)方法類似,只是作用的時間段不同。