ルートガード は、ルートへの/からのナビゲーションが許可されるかどうかを制御する 関数です。ルートがアクティブになる前（またはルートを離れる前）に実行され、認証チェック、権限制御、「保存されていない変更」プロンプトを実現します。
CanActivate → can the user enter this route? (auth/permission check)
CanActivateChild → same, for child routes
CanDeactivate → can the user LEAVE? ("you have unsaved changes")
CanMatch → should this route even be matched? (feature flags, role-based)
resolve → pre-fetch data BEFORE the route activates
import { CanActivateFn, Router } from "@angular/router";
import { inject } from "@angular/core";
export const authGuard: CanActivateFn = (route, state) => {
const auth = inject(AuthService);
const router = inject(Router);
if (auth.isLoggedIn()) {
return true; // allow navigation
}
return router.createUrlTree(["/login"]); // redirect to login
};
ガードは true（許可）、false（ブロック）、または UrlTree（リダイレクト）を返します。モダン Angular は、古いクラスベースのものの代わりに、関数型ガード（inject() を使用した単純な関数）を使用します。
export const routes: Routes = [
{
path: "dashboard",
component: DashboardComponent,
canActivate: [authGuard], // protect this route
},
{
path: "admin",
component: AdminComponent,
canMatch: [roleGuard], // only match for admins
},
];
export const unsavedChangesGuard: CanDeactivateFn<FormComponent> = (component) => {
if (component.form.dirty) {
return confirm("You have unsaved changes. Leave anyway?");
}
return true;
};
この古典的なガードは、保存されていない編集を持つフォームから移動する前にユーザーに警告します。
export const authGuard: CanActivateFn = () =>
inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"])));
// guards can return Observable<boolean> or Promise<boolean>
ガードは、Angular でアクセス制御とナビゲーションルールを実装するための標準的で集中化された方法です。認証されたルートを保護し、ロール/権限でゲートを設定し、終了時のデータ損失を防ぎ、データを事前読み込みします（リゾルバー）。
これらのチェックをガードに配置することで（コンポーネントに散在させるのではなく）、セキュリティとナビゲーションロジックの一貫性と宣言的な性質を保ちます。保護されたルート上の authGuard は、実質的にすべての実際の Angular アプリが実装するものです。