AngularJS ui-routerを使って認証機能を実装してみよう

ユーザ認証モデルを実装する

先日ご紹介したRestangularで認証モデルを実装します。
ログイン処理の成功時にプライベートな変数 _data にユーザデータを格納します。
ログイン済みかの判定は _data に値が入っているかどうかをbooleanで返す関数にしています。

angular.module('services',[])
.service('UserModel', [
    '$q',
    '$state',
    'Restangular',
    'ApiUrlConstant',
    function ($q,$state,Restangular,ApiUrlConstant) {
        var Login = Restangular.all(ApiUrlConstant.login);
        var Logout = Restangular.all(ApiUrlConstant.logout);

        var self = this;
        var _data = null;

        this.setUser = function(data){
           _data = data;
        };

        this.getUser = function(){
            return _data;
        };

        this.isLogged = function(){
            return !!_data;
        };

        this.login = function(data){
            var defer = $q.defer();
            Login.post(data).then(function (user) {
                self.setUser(user);
                defer.resolve(user);
            }, function (e) {
                defer.reject(e);
            });
            return defer.promise;
        };

        this.logout = function(){
            var defer = $q.defer();
            Logout.post().then(function (res) {
                $state.go('login');
                self.destroy();
                defer.resolve(res);
            }, function (e) {
                defer.reject(e);
            });
            return defer.promise;
        };

        this.destroy = function () {
            _data = null;
        };
    }
]);

ルーティングの制御

angular.module('config').run([
    '$rootScope',
    '$state',
    'UserModel',
    function($rootScope,$state,UserModel){
        $rootScope.$on('$stateChangeStart', function(e,toState,toParams,fromState,fromParams) {
            if (!toState.auth) {    // authプロパティが存在しなければチェックせずに終了
                return;
            }

            if(!UserModel.isLogged()){  // ログインしていなければ
                e.preventDefault(); //遷移を止める
                $state.go('login');
            }
        });
    }
]);

ui-routerには$stateChangeStartというイベントが用意されていて、stateが変わる直前（ページ遷移）のタイミングでイベントをフックすることができます。

toStateには$stateProviderで設定しているオブジェクトが入ってくるので/indexへ遷移しようとした場合、toStateから下記のオブジェクトが取得できます。

{
    auth: true
    controller: "index.DashboardCtrl"
    name: "index"
    parent: "/"
    templateUrl: "views/dashboard.html"
    url: "/index"
}

$rootScopeにイベントを登録することで、アプリ全体でページ遷移の度にauthプロパティが存在しているかをチェック。
存在していれば先ほどのUserModelのisLogged関数を呼び、ログイン済みかどうかのチェックをしています。

これでログインしていなければログインページヘの強制的に遷移させることができるようになりました。

まとめ

いかがでしょうか？
AngularJSで認証機能を実装する際の参考になれば幸いです。

【AngularJSを活用する】

※ 業務で安心して使える厳選AngularJSモジュール8選＋α

※ AngularJSのOne-time Bindingを使ってパフォーマンス改善をしよう

※ AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法

※ LIG主催のAngularJS勉強会 #ngCurryが開催されました

※ AngularJS勉強会 ng-mtg#6に登壇してきました

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。