everything-claude-code/docs/ja-JP/skills/angular-developer/references/route-guards.md

ルートガード

ルートガードは、ユーザーがルートへ遷移できるか、またはルートから離れられるかを制御します。

ガードの種類

• CanActivate：ユーザーはこのルートにアクセスできるか？（例：認証チェック）
• CanActivateChild：ユーザーはこのルートの子にアクセスできるか？
• CanDeactivate：ユーザーはこのルートから離れられるか？（例：未保存の変更）
• CanMatch：このルートはマッチングの対象として考慮すべきか？（例：フィーチャーフラグ）false を返すと、ルーターは他のルートのチェックを継続します。

ガードの作成

Angular 15 以降、ガードは通常、関数として定義します。

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

  if (authService.isLoggedIn()) {
    return true;
  }

  // ログインページへリダイレクト
  return router.parseUrl('/login');
};

ガードの適用

ルート設定に配列として追加します。順番通りに実行されます。

{
  path: 'admin',
  component: Admin,
  canActivate: [authGuard],
  canActivateChild: [adminChildGuard],
  canDeactivate: [unsavedChangesGuard]
}

戻り値

• boolean：true で許可、false でブロック。
• UrlTree または RedirectCommand：別のルートへリダイレクト。
• Observable または Promise：上記の型に解決されます。

セキュリティに関する注意

クライアントサイドのガードはサーバーサイドのセキュリティの代わりにはなりません。 サーバー側で常に権限を検証してください。