---
title: Auth Guard
tags: Angular
---

### 使用情境

* 若頁面需要相對應的權限才能進入，即可透過 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),
    }