已經二次回診、加重藥劑量了，希望感冒快快好
大家要多保重身體，出門在外、尤其是搭捷運的時候，一定要戴口罩，保護好自己！

接下來我們要來做「全域路由守衛」的攔截功能。

適用於以下兩種情境：

A. 未驗證狀態：

當訪客在未登入狀態下，直接點擊連結或手動輸入網址嘗試進入系統內部頁面時，系統應將其攔截並導引至 /login 登入頁面，確保未授權使用者無法取得內部資訊。

B. 已驗證狀態：

當已登入的使用者在瀏覽過程中，手動輸入或點擊連結造訪 /login 頁面時，系統應自動將其導回首頁 /home，避免使用者產生重複登入的混淆。

開發步驟：

一、Angular CLI 生成指令

$ ng generate guard global-guard.ts // 自定義檔名

二、撰寫global-guard.ts

1. 引入檔(import)

• inject: 相依性注入，可以想像成以往寫 JavaScript 時需要在元件內 new 一個實例，而 inject 是 Angular 幫妳寫好、自動傳遞元件所需的物件的服務。
• CanActivateFn: 為 Angular 路由守衛四大型別之一，決定使用者是否可以訪問某個路由，最常用於身份驗證和授權。
• StorageService: 預先寫好可以儲存、讀取、刪除 cookie 的狀態管理服務。

程式碼：

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { StorageService, STORAGE_KEYS } from '@shared-core';

2. 需要登入才能進入的頁面

1. 注入 StorageService、Router 服務供元件使用。
2. 取出儲存在 cookie 的 token。
3. 判斷沒有 token 便轉址登入頁。
4. 有 token 便回傳 true，意思是允許導向使用者希望前往的頁面。

程式碼：

export const authGuard: CanActivateFn = () => {
  const storage = inject(StorageService);
  const router = inject(Router);

  const token = storage.get<string>(STORAGE_KEYS.ACCESS_TOKEN, 'COOKIE');

  if (!token) {
    return router.createUrlTree(['/login']);
  }
  return true;
};

3. 已登入時禁止進入登入頁

1. 注入 StorageService、Router 服務供元件使用。
2. 取出儲存在 cookie 的 token。
3. 判斷有 token 便轉址首頁。
4. 沒有 token 便回傳 true，意思是允許導向登入頁。

程式碼：

export const publicGuard: CanActivateFn = () => {
  const storage = inject(StorageService);
  const router = inject(Router);

  const token = storage.get<string>(STORAGE_KEYS.ACCESS_TOKEN, 'COOKIE');

  if (token) {
    return router.createUrlTree(['/']);
  }
  return true;
};

三、app.routes.ts 設定

1. 引入路由守衛 authGuard、publicGuard。
2. 新增 Key 值 canActivate。
3. 未驗證狀態：放 [authGuard]。
4. 已驗證狀態：放 [publicGuard]。

程式碼：

import { Routes } from '@angular/router';
import { authGuard, publicGuard } from '@app/core/guards/global-guard.guard';

export const routes: Routes = [
  {
    path: 'login',
    canActivate: [publicGuard],
    loadComponent: () => import('./pages/login/login.component').then(m => m.LoginComponent),
  },
  {
    path: '',
    canActivate: [authGuard],
    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent),
  },
];

以上就是 Angular 全域路由守衛實作方式，大家也來試試看吧。
更多詳細的實作方法，可以瀏覽官方文件，加強概念唷！

參考資料：

• Angular 官網 - 使用守衛控制路由訪問