angular-guards

Angular ルートガード

バージョン： Angular 21（2025） タグ： ガード、ルーティング、認証、CanActivate

参考資料： ガードガイド • CanActivate

API の変更点

このセクションでは、最近のバージョン固有の API の変更について説明します。

• 新機能：関数型ガード — クラスベースの代わりに CanActivateFn を使用します

• 新機能：CanMatch ガード — 認証されていないコードの遅延読み込みを防ぎます

• 新機能：ガードを指定した provideRouter — 最新のガード登録方法です

• 非推奨：クラスベースのガード — 関数型に移行します

ベストプラクティス

• 関数型ガードを作成する

export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

• ルート保護には CanActivate を使用する

const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    component: DashboardComponent
  }
];

• 子ルートには CanActivateChild を使用する

export const adminGuard: CanActivateChildFn = () => {
  const auth = inject(AuthService);
  return auth.isAdmin() || inject(Router).createUrlTree(['/unauthorized']);
};

const routes: Routes = [
  {
    path: 'admin',
    canActivateChild: [adminGuard],
    children: [...]
  }
];

• 遅延読み込みには CanMatch を使用する

const routes: Routes = [
  {
    path: 'admin',
    canMatch: [authGuard],
    loadComponent: () => import('./admin/admin.component')
  }
];

• 未保存の変更には CanDeactivate を使用する

export const canDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (component) => {
  if (component.hasUnsavedChanges?.()) {
    return confirm('You have unsaved changes. Are you sure?');
  }
  return true;
};

• withComponentInputBinding を使用する

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding())
  ]
};

• 複数のガードを使用する

const routes: Routes = [
  {
    path: 'admin',
    canActivate: [authGuard, adminGuard],
    loadComponent: () => import('./admin/admin.component')
  }
];

• ガードにデータを渡す

const routes: Routes = [
  {
    path: 'user/:id',
    canActivate: [userGuard],
    data: { requiredRole: 'admin' }
  }
];

export const userGuard: CanActivateFn = (route, state) => {
  const requiredRole = route.data['requiredRole'];
  // Check role
};