Angular 2 - ルーティング：CanActivateをマスターして、より強力なアプリケーションを構築しよう！

2024-05-20

Angular 2 - ルーティング - CanActivate の Observable を使った動作解説

Angular 2 では、CanActivate ガードを使用して、特定のルートへのアクセスを制御できます。これは、認証、アクセス許可、その他の条件に基づいて、ユーザーがルートにアクセスできるかどうかを判断するために役立ちます。

CanActivate ガードは、boolean 値または Observable<boolean> を返す関数として実装できます。boolean 値を返す場合、true はルートへのアクセスを許可し、false はアクセスを拒否します。

Observable<boolean> を返す場合、ガードは、ルートへのアクセスを許可または拒否する前に、非同期操作を実行できます。これは、API 呼び出しを使用してユーザーの認証状態を確認したり、ローカルストレージからアクセス許可を取得したりするような場合に役立ちます。

Observable を使った CanActivate ガードは、次の順序で動作します。

ルーターがルートへのアクセスを試みます。
CanActivate ガードが呼び出されます。
ガードは、非同期操作を実行するために Observable<boolean> を返します。
Observable が完了すると、ガードは true または false の値を返します。
ルーターは、ガードの値に基づいてルートへのアクセスを許可または拒否します。

例

次の例は、ユーザーが認証されているかどうかを確認するために Observable<boolean> を使用する CanActivate ガードを示しています。

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(): Observable<boolean> {
    return this.authService.isAuthenticated().pipe(
      map(authenticated => {
        if (!authenticated) {
          this.router.navigate(['/login']);
          return false;
        }

        return true;
      })
    );
  }
}

この例では、AuthGuard クラスは CanActivate インターフェースを実装しています。canActivate メソッドは、Observable<boolean> を返します。

canActivate メソッドは、authService サービスの isAuthenticated メソッドを呼び出して、ユーザーが認証されているかどうかを確認します。isAuthenticated メソッドは、boolean 値を返す Observable を返します。

Observable が完了すると、map オペレーターを使用して、true または false の値を返します。ユーザーが認証されていない場合、router サービスを使用して /login ルートにナビゲートします。

補足

CanActivate ガードは、ルートレベルとコンポーネントレベルの両方で使用できます。
複数の CanActivate ガードをチェーンして、より複雑なアクセス制御ロジックを実装できます。
CanActivate ガードは、ナビゲーションイベントをキャンセルするために使用することもできます。

この例では、CanActivate ガードを使用して、ユーザーが認証されているかどうかを確認します。ユーザーが認証されていない場合、/login ルートにリダイレクトします。

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(): Observable<boolean> {
    return this.authService.isAuthenticated().pipe(
      map(authenticated => {
        if (!authenticated) {
          this.router.navigate(['/login']);
          return false;
        }

        return true;
      })
    );
  }
}

例：API 呼び出しを使用してアクセス許可を確認する CanActivate ガード

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { PermissionService } from './permission.service';

@Injectable()
export class PermissionGuard implements CanActivate {

  constructor(private router: Router, private permissionService: PermissionService) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const requiredPermission = route.data['requiredPermission'];

    return this.permissionService.hasPermission(requiredPermission).pipe(
      map(hasPermission => {
        if (!hasPermission) {
          this.router.navigate(['/forbidden']);
          return false;
        }

        return true;
      })
    );
  }
}

説明

上記のサンプルコードは、Angular 2 の基本的な機能のみを示しています。実際のアプリケーションでは、より複雑なロジックが必要になる場合があります。
コードは TypeScript で記述されていますが、JavaScript でも同様のロジックを実装できます。
サンプルコードは、依存関係注入 (DI) を使用してサービスをインスタンス化しています。DI は、Angular 2 の重要な概念であり、コードをよりテストしやすく、保守しやすくします。
サンプルコードは、RxJS ライブラリを使用して非同期操作を処理しています。RxJS は、Angular 2 で広く使用されている強力なライブラリです。

サンプルコードは、あくまでも参考情報として提供されています。実際のアプリケーションでは、独自の要件に合わせてコードを調整する必要があります。
Angular 2 と RxJS に関する詳細は、公式ドキュメントを参照してください。

Angular 2 では、CanActivate ガードを実装する方法は他にもいくつかあります。ここでは、いくつか例を挙げます。

Promise を使用する

CanActivate ガードは、Promise<boolean> を返す関数としても実装できます。これは、非同期操作を実行する必要がある場合に役立ちます。

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(): Promise<boolean> {
    return this.authService.isAuthenticated().then(authenticated => {
      if (!authenticated) {
        this.router.navigate(['/login']);
        return false;
      }

      return true;
    });
  }
}

RouterEvent を使用する

CanActivate ガードは、RouterEvent を返す関数としても実装できます。これは、ナビゲーションイベントをキャンセルするために使用できます。

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): RouterEvent | boolean {
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }

    return true;
  }
}

カスタム CanActivate クラスを作成する

独自のロジックを備えた CanActivate ガードを実装する必要がある場合は、カスタムクラスを作成できます。

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class CustomAuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // カスタムロジックを実装する

    if (// 条件が満たされない場合) {
      this.router.navigate(['/forbidden']);
      return false;
    }

    return true;
  }
}