Angular 的守護者

介紹

在本文中，我們將探索如何在 Angular 17 中使用守衛。守衛允許您保護路由並在允許存取特定路由之前檢查某些條件。

什麼是功能守衛？

Angular 中的功能防護是一種用於攔截並可能阻止導航到路線的功能。在 Angular 17 中，您可以使用 CanActivateFn 建立功能防護。

程式碼範例

這是一個功能性 authGuard 的範例：

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};

使用守衛

要使用此防護，您必須使用provideRouter和withGuards在路由模組中設定它：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withGuards } from '@angular/router';
import { AppComponent } from './app/app.component';
import { authGuard } from './app/guards/auth.guard';

const routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withGuards())
  ]
}).catch(err => console.error(err));

程式碼說明

• CanActivateFn：代表保護函數的型別。
• inject：注入服務等依賴項的函數。
• 路由器：導航到其他路線的路由服務。
• authGuard：檢查使用者是否經過驗證的防護功能。

結論

Angular 17 中的功能防護提供了一種靈活且強大的方法來保護路由和管理權限。它們對於身份驗證和存取控制等任務特別有用。

更多詳情請參閱 Angular 關於守衛的官方文件【20†來源】【22†來源】【23†來源】。

以上是Angular 的守護者的詳細內容。更多資訊請關注PHP中文網其他相關文章！