【初心者向け】AngularのcanLoadとcanActivateを理解して使いこなせるようになる方法

Angularにおける canLoad と canActivate の違い

canActivate

canActivate は、コンポーネントがアクティブ化される直前に実行されます。つまり、ユーザーがすでにそのルートにアクセスしようとしている段階です。このガードは以下の役割を果たします。

• 認証: ユーザーがルートにアクセスするために必要な権限を持っているかどうかを確認します。
• データ取得: コンポーネントが表示される前に必要なデータを事前に取得します。
• リダイレクト: ユーザーがアクセスしようとしているルートが適切でない場合、別のルートにリダイレクトします。

canLoad

• パフォーマンスの向上: ユーザーがアクセスできないモジュールの読み込みを無駄に避けることで、アプリケーションのパフォーマンスを向上させます。
• セキュリティの強化: 悪意のあるユーザーが意図的にモジュールを読み込ませて脆弱性を突くのを防ぎます。

具体的な使い分け例

以下は、canActivate と canLoad の具体的な使い分け例です。

• 認証: すべてのルートにアクセスするためにログインが必要な場合、canActivate を使用してすべてのルートにガードを設定します。
• 管理者権限: 特定のルートにアクセスするには管理者権限が必要な場合、そのルートに対して canActivate を使用して権限チェックを行います。
• 遅延読み込みモジュール: ユーザーがアクセスする可能性が低いモジュールは、canLoad を使用して遅延読み込みし、パフォーマンスを向上させます。

まとめ

canActivate と canLoad は、それぞれ異なるタイミングで実行され、異なる役割を果たします。これらのガードを使い分けることで、アプリケーションのセキュリティとパフォーマンスを向上させることができます。

補足

• 上記の説明は、基本的な動作を説明したものです。詳細については、上記の参考資料を参照してください。
• canLoad は Angular 2.4 以降で利用可能です。

AuthGuard

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanLoad {

  constructor(private router: Router) {}

  canActivate(): boolean {
    // 認証チェック
    if (this.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

  canLoad(): boolean {
    // 認証チェック
    if (this.isAuthenticated()) {
      return true;
    } else {
      return false;
    }
  }

  private isAuthenticated(): boolean {
    // 実際の認証ロジック
    return true;
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminComponent } from './admin.component';

@NgModule({
  declarations: [AdminComponent],
  imports: [
    CommonModule
  ]
})
export class AdminModule { }

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

動作説明

• ユーザーが /admin ルートにアクセスしようとすると、まず AuthGuard.canLoad() が実行されます。
• AuthGuard.canLoad() は、ユーザーが認証済みかどうかをチェックします。
• ユーザーが認証済みであれば、AdminModule が遅延読み込みされます。
• ユーザーが認証済みでなければ、AdminModule は読み込まれず、ユーザーは /login ルートにリダイレクトされます。
• ユーザーが /admin ルートにアクセスした後、AdminComponent がアクティブ化されます。
• AdminComponent は、AuthGuard.canActivate() を通じて再度認証チェックを行います。

• 上記のコードは、あくまでサンプルコードです。実際のアプリケーションでは、必要に応じてロジックを変更する必要があります。
• AuthGuard は、実際の認証ロジックに置き換える必要があります。

Angular でルートアクセス制御を行う他の方法

ロールベースアクセス制御 (RBAC)

RBAC は、ユーザーのロールに基づいてアクセス権限を制御する方法です。Angular では、@ng-bootstrap/ng-bootstrap ライブラリなどのライブラリを使用して RBAC を実装することができます。

カスタムガード

canActivate と canLoad 以外にも、独自のガードを作成してルートアクセス制御を行うことができます。

ルーター設定

特定のルートにアクセスできるユーザーのロールをルーター設定で直接指定することもできます。

認証サービス

独自の認証サービスを作成して、ルートアクセス制御ロジックを実装することができます。

どの方法を選択するかは、アプリケーションの要件によって異なります。 以下は、それぞれの方法のメリットとデメリットです。

Angular でルートアクセス制御を行う方法はいくつかあります。どの方法を選択するかは、アプリケーションの要件によって異なります。

上記のサンプルコードは、canActivate と canLoad を使用した方法の例です。他の方法を使用する場合は、必要に応じてコードを変更する必要があります。