Angular路由守衛
路由守衛
簡介
目前,任何使用者都能在任何時候導航到任何地方,對於大部分應用,這樣是存在安全問題的,某些使用者可能無權導航到目標元件,需要先登入(認證)
在顯示目標元件前，可能需要先獲取某些資料。
在離開元件前，可能要先儲存修改.需要詢問使用者:是否要放棄本次更改,而不用儲存它們?
對於上述這些場景問題,往往需要在路由配置中新增守衛,進行處理.
返回值
守衛通過返回一個值，以控制路由器的行為：
-
如果它返回 true，導航過程會繼續
-
如果它返回 false，導航過程就會終止，且使用者留在原地。
-
如果它返回 UrlTree，則取消當前的導航，並且開始導航到返回的這個 UrlTree.
守衛還可以告訴路由器導航到別處，這樣也會取消當前的導航。要想在守衛中這麼做，就要返回 false;
守衛可以用同步的方式返回一個布林值,但在很多情況下,守衛無法用同步的方式給出答案.守衛可能會向用戶問一個問題、把更改儲存到伺服器，或者獲取新資料，而這些都是非同步操作。因此，路由的守衛可以返回一個Observable
提供給路由器的可觀察物件還必須能結束,否則,導航就不會繼續.
守衛介面
路由器可以支援多種守衛介面：
* 用CanActivate來處理導航到某路由的情況。
-
用CanActivateChild來處理導航到某子路由的情況。
-
用CanDeactivate來處理從當前路由離開的情況.
-
用Resolve在路由啟用之前獲取路由資料。
-
用CanLoad來處理非同步導航到某特性模組的情況。
在分層路由的每個級別上,你都可以設定多個守衛,上面提到過的空路由,在這裡會可能發揮很好的作用
路由器會先按照從最深的子路由 由下往上檢查的順序來檢查CanDeactivate() 和CanActivateChild() 守衛.然後它會按照從上到下的順序檢查CanActivate()守衛. 如果特性模組是非同步載入的,在載入它之前還會檢查CanLoad()守衛. 如果任何一個守衛返回 false,其它尚未完成的守衛會被取消,這樣整個導航就被取消.
使用
- 生成一個守衛
//新增一個auth守衛
ng generate guard auth (簡寫ng g g auth/auth)
生成的守衛會自動實現canactivate,若非同步載入模組的，還需要實現CanLoad
在守衛裡進行安全的邏輯設定，可以用與服務結合實現
export class AuthGuard implements CanActivate{}
- 新增進路由（假設訪問info介面需要登入）
{ path: 'info', canActivate: [AuthGuard], component: WorkComponent },