コンポーネントへの遷移を防ぐガード
一般にWebアプリでは、未認証時や編集内容を保存していない場合など、画面遷移をガードしたいときがあります。このような目的で、ルーターには表3のガード機能があります。
名前 | 主な機能 |
---|---|
CanActivate | ルートへの遷移をガード |
CanActivateChild | 子ルートへの遷移をガード |
CanDeactivate | 現在コンポーネントからの退出をガード |
Resolve | 特定処理完了まで遷移をガード |
CanLoad | 不必要なモジュールのロードをガード |
本記事では、CanActivateとCanDeactivateガードについて、図4のサンプル(angular-004-router4)で説明します。このサンプルでは、適切なユーザー名を入力しないとコンポーネントに遷移できず、ログアウト許可のチェックボックスをチェックしないとコンポーネントから退出できません。
![図4 コンポーネント切り替えをガードするサンプル(angular-004-router4)](http://cz-cdn.shoeisha.jp/static/images/article/9887/9887_004.png)
ガード処理はサービス(TypeScriptクラス)に実装して、リスト11の(1)(2)のようにルーターの設定で指定します。
RouterModule.forRoot([ { path: "comp1/:username", component: Comp1Component, // 遷移時のガード処理サービス指定 ...(1) canActivate: [ActivateGuardService], // 退出時のガード処理サービス指定 ...(2) canDeactivate: [DeactivateGuardService], }, (以下略)
遷移時のガード処理を実行するサービスActivateGuardServiceはリスト12のようになります。
@Injectable() export class ActivateGuardService implements CanActivate { // インターフェイスを設定 ...(1) /** * ガード判定処理 ...(2) */ canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { // ユーザー名が一致した場合はtrueを返して、画面遷移を許可する if (route.params["username"] == "yoshikawa") { return true; } // それ以外はfalseを返して、画面遷移を許可しない else { alert("許可されたユーザーではありません。") return false; } } }
遷移時のガード処理を表すCanActivateインターフェイスを(1)で設定しています。インターフェイス実装は(2)のcanActivateメソッドで、遷移を許可するかどうかをtrueまたはfalseの戻り値で指定します。引数のActivatedRouteSnapshotはその時点のルート状態を表し、指定されたパラメーターなどが取得できます。RouterStateSnapshotはその時点のルーター自身の状態を表し、URLなどが取得できます。ここでは指定されたusernameパラメーターを受け取り、その内容で遷移するかどうかを判定しています。
同様に、退出時のガード処理を実行するには、サービスのTypeScriptクラスにCanDeactivateインターフェイスのメソッド(canDeactiate)を実装して、退出を許可するかどうかをtrueかfalseの戻り値で指定します。実装内容はサンプルコード(angular-004-router4)のapp/deactivateguard.service.tsファイルを参照してください。
まとめ
本記事では、Angular 2でコンポーネントとURLを対応付けて表示を切り替えるルーターの機能を紹介しました。ルーターを利用すると、コンポーネントの表示切り替えをシンプルに行うことができ、コンポーネントに対応したURLがアドレスバーに表示されたり、Webブラウザーの「進む」「戻る」ボタンで画面遷移できるなど、一般的なWebページと似た使い勝手を提供できます。