概要

AngularFireを利用していて、Guardを導入する際、Firebase製のGuardがあることを知り、導入してみたら想像以上に簡単にGuardを実装することができたので、記事にして共有しようと思います。

導入

例のごとく、app.module.tsにモジュールを追加してください。firebase関連のモジュールも一応記載しておきます。

※古いAngularFire系の記事を参考にする場合、v8系のコードを使うにはfireの後にcompatが入るようになっていますので、迷走している方は参考にしてください。

app.module.ts

// firebase
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule} from '@angular/fire/compat/auth';
import { AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';  // ← 追加
import { environment } from 'src/environments/environment';

@NgModule({
  imports: [
    // firebase
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFireAuthGuardModule,  // ← 追加
  ],
})
export class AppModule { }

次にルーティングモジュールにGuardの記載を追加します。
大抵の場合は認証が切れたらログイン画面に戻るようにしたいと思いますので、今回はログイン画面にリダイレクトする方法も併せて記載します。

Guardを設定したいパスの部分にcanActivate:[AngularFireAuthGuard]を追加することでGuardが設定され、
data: {authGuardPipe: redirectUnauthorizedToLogin }で認証が通らなかった際のリダイレクト先を指定しています。
他にもいくつかカスタマイズできるみたいです。

※loadChildren: () => ~~Moduleのように記載していますが、いつも通りのcomponent: ~~componentでも問題ありません

app-routing.module.ts

import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';  // ← 追加

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(["auth"]);  // ← リダイレクト先を指定したい場合に使用
const routes: Routes = [
  { path: '', redirectTo: '/auth', pathMatch: 'full' },
  { path: 'auth', loadChildren: () => AuthModule },
  { path: 'main', canActivate: [AngularFireAuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin }, loadChildren: () => MainModule},  // ← 追加
  { path: '**', redirectTo: '/auth' },
];

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

以上で終了です！

これでfirebaseを使った認証ならばGuardが働いてくれる状態になりました。

まとめ

実質、ルーティングモジュールにちょちょっと追記するだけでGuardの設定をすることができてしまいました。
お気づきになりましたか？
そうなんです。Guardを作成しなくて良いんです。良い時代になりましたね。

AngularFireのGuardを導入する

概要

導入

まとめ

参考