因為會忘,所以要寫下來

Angular 路由守衛

我們在開發的過程中,經常會遇到需要某些權限才能進入的頁面,這時後就會需要路由守衛的機制啦, 而它最常用在登入畫面時


快速建立

Angular CLI 提供了命令列工具,可以快速建立路由守衛框架檔案:

ng generate guard auth

ng g g auth

官網介紹:guard

執行後,Angular CLI 會問我們需要實現哪些介面,我們直接勾選即可

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) CanActivate
 ( ) CanActivateChild
 ( ) CanDeactivate
 ( ) CanLoad
  • CanActivate: 控制路由是否可以啟用
  • CanActivateChild: 控制子路由是否可以啟用
  • CanDeactivate: 控制路由是否可以退出
  • CanLoad: 控制模組(module)是否可以被載入

建立完後 會生成一隻 auth.guard.ts

import { Injectable } from "@angular/core";
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
  UrlTree,
} from "@angular/router";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class AuthGuard implements CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    // 條件若符合的話 就能成功跳轉
    return true;
  }
}

接著我們就可以在在這頁設定是否讓頁面跳轉


在 router 裡啟用路由

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent,
  },
  {
    path: "",
    component: HomeComponent,
    canActivate: [AuthGuard], // 啟用路由
  },
  {
    path: "",
    pathMatch: "full",
    redirectTo: "/",
  },
];

基本設定大概是這樣,明天就來介紹如何使用範例吧!


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular