【AngularJS】フロントサイドでログイン認証機能を実装する。

下記URLのstackさんを参考にやってみた。っていってもほぼそのまんまだけど。

http://stackoverflow.com/questions/20969835/angularjs-login-and-authentication-in-each-route-and-controller

■constants.js(ログインが必要なページ(URI)をここで定義しておく)

app.constant('requireAuth', [
    '/admin/dashboard'
]);

■app.js

app.run(['$rootScope', '$location', 'auth', 'requireAuth',
    function($rootScope, $location, auth, requireAuth) {

    // login check
    $rootScope.$on('$routeChangeStart', function(event) {
        if (requireAuth.indexOf($location.path()) > -1 && !auth.isLoggedIn()) {
            // ログインページに飛ばす
            event.preventDefault();
            $location.path('/login');
        }
    });
}]);

■factories.js

app.factory('auth', function(){
    var user;
    
    return {
        setUser: function(aUser) {
            user = aUser;
        },
        isLoggedIn: function() {
            return (user) ? user : false;
        }
    }
});

■controllers.js(ログインが必要なコントローラーにて)

var controller = function($scope, $location, auth) {
    $scope.$watch(auth.isLoggedIn, function(value, oldValue) {
        if (!value && oldValue) {
            // ログインページに飛ばす
            $location.path('/login');
        }
    }, true);
}

こんな感じでなかなかよさ気に実装することが出来た。
ただしこのままだとページをリロードするとログアウトしてしまうため、そこは$cookieなどをうまく利用してログイン状態を維持しておくのがベター。