51. ルートガード — 入ってよいかを判定する

ルートガードは、そのルートに入ってよいかを遷移の直前に判定する仕組みです。CanActivateFn 型の関数を作り、ルート定義に canActivate: [authGuard] と登録すると、遷移のたびにその関数が呼ばれます。true を返せば遷移が続行され、false や別のURLを返せば遷移が止まります。

定番の用途は認証チェックです。「ログインしていなければログイン画面へ飛ばす」を、各コンポーネントではなくルート定義の側で一括して守れます。ガードは普通の関数ですが、DIコンテキストの中で呼ばれるため inject() が使えます。認証サービスや Router を inject して判定に使うのが基本形です。

リダイレクトさせたいときは、false を返すのではなく inject(Router).parseUrl('/login') のように UrlTree を返します。false だと遷移が止まるだけで画面はそのままなので、ユーザーには何も起きていないように見えてしまいます。「止めるだけなら false、誘導するなら parseUrl」と覚えましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

// ガードは関数。DIコンテキストなので inject() が使える
export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);

  if (auth.isLoggedIn()) {
    return true; // 遷移を許可
  }
  // 未ログインならログイン画面へリダイレクト
  return router.parseUrl('/login');
};

// ルート定義側:
// { path: 'mypage', component: MyPage, canActivate: [authGuard] }

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗