URLとリンクでコンポーネント表示を切り替える「Angular 2」のルーター

次世代Webアプリケーションフレームワーク「Angular」の活用 第5回

コンポーネントへの遷移を防ぐガード

　一般にWebアプリでは、未認証時や編集内容を保存していない場合など、画面遷移をガードしたいときがあります。このような目的で、ルーターには表3のガード機能があります。

表3　Angular 2のルーターが備えるガード機能

名前	主な機能
CanActivate	ルートへの遷移をガード
CanActivateChild	子ルートへの遷移をガード
CanDeactivate	現在コンポーネントからの退出をガード
Resolve	特定処理完了まで遷移をガード
CanLoad	不必要なモジュールのロードをガード

　本記事では、CanActivateとCanDeactivateガードについて、図4のサンプル（angular-004-router4）で説明します。このサンプルでは、適切なユーザー名を入力しないとコンポーネントに遷移できず、ログアウト許可のチェックボックスをチェックしないとコンポーネントから退出できません。

図4　コンポーネント切り替えをガードするサンプル（angular-004-router4）

　ガード処理はサービス（TypeScriptクラス）に実装して、リスト11の（1）（2）のようにルーターの設定で指定します。

リスト11　ガード処理サービスの登録（angular-004-router4/app/app.module.ts）

RouterModule.forRoot([
  {
    path: "comp1/:username",
    component: Comp1Component,
    // 遷移時のガード処理サービス指定 ...（1）
    canActivate: [ActivateGuardService],
    // 退出時のガード処理サービス指定 ...（2）
    canDeactivate: [DeactivateGuardService],
  },
（以下略）

　遷移時のガード処理を実行するサービスActivateGuardServiceはリスト12のようになります。

リスト12　遷移時のガード処理（angular-004-router4/app/activateguard.service.ts）

@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ページと似た使い勝手を提供できます。

参考資料

• Angular 2
• AngularJS