使用情境

• 若頁面需要相對應的權限才能進入，即可透過 Auth Guard 完成權限架構，而不需每個頁面做一次判斷。

執行時機 - 跳轉到相對應的頁面時會根據不同情況使用以下 Method。

canActivate

• 從 A Module 跳轉至 B Module 時會執行。

canActivateChild

• 從 A Module 的 A1 Component 跳轉到 A Module 的 A2 Component 時會執行。

canLoad

建立

• 可使用 Angular CLI 透過指令 ng generate guard auth/auth 建立。

• method 依靠回傳值作為是否能進入該頁面的判斷條件，可使用型態:

  1. 1.Observable<boolean | UrlTree>
  2. Promise<boolean | UrlTree>
  3. boolean
  4. UrlTree

使用

• 於定義 routing list 的時候指定要使用指定 guard 的特定 method，如

  ​​​​{
  ​​​​    path: "pages",
  ​​​​    canActivate: [AuthGuard],
  ​​​​    loadChildren: () =>
  ​​​​      import("./pages/pages.module").then((m) => m.PagesModule),
  ​​​​}