Angularのルートガード

このレッスンでは、ルートガードを使ってAngularアプリケーションのルートを保護する方法について説明します。

ルートガードとは

ルートガードは、Angularでルートへのアクセスを制御します。機密性の高いルートやアクセスを制限したルートの保護に役立ちます。

ガードの種類

• CanActivate: ルートを有効化できるかどうかを判定します。
• CanActivateChild: 子ルートを保護します。
• CanDeactivate - ルートから離れる前に確認します。
• Resolve - ルートを有効化する前にデータを事前取得します。

ガードを作成する

Angular CLIを使ってガードを作成します。

ng generate guard auth

canActivate()を実装する

canActivate()メソッドでルートへのアクセスを制御します。

canActivate(): boolean {
  return true; // or false to block navigation
}

ルートでガードを使う

ルーティングモジュールのルートにガードを追加します。

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

CanDeactivateガード

CanDeactivateは、特定の条件を満たしていない場合にルートから離れるのを防ぎます。フォームで役立ちます。

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Resolveガード

Resolveガードは、ルートが読み込まれる前にデータを取得します。

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

まとめ

ルートガードを使って、Angularアプリのナビゲーションを保護し、拡張する方法を学びました。この調子で続けてください。