コンポーネントへの遷移を防ぐガード
一般にWebアプリでは、未認証時や編集内容を保存していない場合など、画面遷移をガードしたいときがあります。このような目的で、ルーターには表3のガード機能があります。
| 名前 | 主な機能 |
|---|---|
| CanActivate | ルートへの遷移をガード |
| CanActivateChild | 子ルートへの遷移をガード |
| CanDeactivate | 現在コンポーネントからの退出をガード |
| Resolve | 特定処理完了まで遷移をガード |
| CanLoad | 不必要なモジュールのロードをガード |
本記事では、CanActivateとCanDeactivateガードについて、図4のサンプル（angular-004-router4）で説明します。このサンプルでは、適切なユーザー名を入力しないとコンポーネントに遷移できず、ログアウト許可のチェックボックスをチェックしないとコンポーネントから退出できません。
ガード処理はサービス（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ページと似た使い勝手を提供できます。
