読者です 読者をやめる 読者になる 読者になる

angular.jsでログイン認証などの共通処理を実装する方法

やりたいこと

angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。

今回やりたかったのは以下のような処理を全ページにいれたかったです
例1. ログインせずにアクセスされたらログインページを表示するような処理
例2. socket.ioとの接続が確立できていなかったら接続または再接続を行う処理

phpなどのサーバサイドでの実装はよくやってましたがjavascript(というかangularjs)でこういう処理は初めてでした。

実装

実際にこんなに単純な認証があるかはわかりませんが、サイトにアクセスしてきたら必ずサーバへリクエストしてokならそのことを保持しておいて以降は何もしないという流れになります

// メイン処理
var App = angular.module("App", ["ngRoute", "ngResource"]);

// ルーティング
App.config(function($routeProvider) {
  var prepare = [
    function($location, ModelUser) {
      // 認証できていなければ
      if (ModelUser.is_auth == false) {
        ModelUser.get().$promise.then(function(response) {
          // サーバからOKが返ってきたら認証
          if (response.result == "ok") {
            ModelUser.is_auth = true;
          }
        }
      } else {
        // 認証済みなので何もしない
      }
    }
  ];

  // 以下、認証処理をしたいページのresolveにprepareを追加
  $routeProvider.when("/", {
    templateUrl: "views/index.html",
    controller: "ControllerIndex",
    resolve: prepare
  }

  $routeProvider.when("/detail/:id", {
    templateUrl: "views/detail.html",
    controller: "ControllerDetail",
    resolve: prepare
  }

  $routeProvider.otherwise({
    redirectTo: "/"
  });
});

// 認証モデルを作る
App.factory("ModelUser", function($resource) {
  var is_auth = false;
  return $resouce(
    "http://example.com/api/user/auth.json"
  );
}

とりあえずこんな形でやりたいことはできました。

AngularJS でログインのフローを作る - Qiita
ちなみにこちらのページを参考にさせていただきました。とてもわかりやすいです

以上です