Angularにおけるガードの使用法

まず、ガードは特定の条件を満たすかどうかをチェックし、ルートナビゲーションの制御を行います。例えば、特定のユーザーがログインしているかどうかを確認して、ログインしていない場合には特定のルートにアクセスさせないようにすることができます。

ガードを作成するには、@Injectable() デコレータを使用してクラスを作成し、CanActivate インターフェースを実装します。以下は、ログイン状態をチェックするガードの例です。

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(): boolean {
    if (/* ログイン状態をチェックする条件 */) {
      return true; // ナビゲーションを許可
    } else {
      this.router.navigate(['/login']); // ログインページにリダイレクト
      return false; // ナビゲーションをブロック
    }
  }
}

上記の例では、CanActivate インターフェースの canActivate メソッド内でログイン状態をチェックしています。ログインしている場合は true を返し、ナビゲーションを許可します。ログインしていない場合は、Router サービスを使用してログインページにリダイレクトし、false を返すことでナビゲーションをブロックします。

ガードを使用するには、ルート定義で canActivate プロパティにガードのクラスを指定します。以下は、ルート定義でのガードの使用例です。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard] // ガードの使用
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

上記の例では、canActivate プロパティに AuthGuard クラスを指定しています。これにより、HomeComponent へのアクセス時に AuthGuard の条件チェックが行われ、適切なナビゲーション制御が行われます。