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;
  }
};

ガードの使用

このガードを使用するには、providerRouter と 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 中国語 Web サイトの他の関連記事を参照してください。