angular authentication with angular modules: http-auth-interceptor, angular-growl , angular-ui : UI-Router & UI-Bootstrap , restangular

app.js

angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap','ngAnimate','angular-growl', 'restangular','http-auth-interceptor'])
    .config(function ($stateProvider, $urlRouterProvider, growlProvider, RestangularProvider, $httpProvider) {

        // For any unmatched url, redirect to /state1
        $urlRouterProvider.otherwise("/home");

        $stateProvider
            .state('home', {
                url: "/home",
                templateUrl: "views/home.html",
                controller: 'HomeCtrl'
            })
            .state('dashboard', {
                url: "/dashboard",
                templateUrl: "views/dashboard.html",
                controller: 'DashboardCtrl'
            })
    })
    .run(function($rootScope, growl, $state, $stateParams) {

        //retrieve user session from sessionStorage when page is reloaded.
        if(sessionStorage.getItem("username") != null ) {
            $rootScope.username = sessionStorage.getItem("username");
            $rootScope.isLoggedIn = sessionStorage.getItem("isLoggedIn");
            $rootScope.currentUser = JSON.parse(sessionStorage.getItem("currentUser"));
        }

    });

auth.js

'use strict';

angular.module('ConsoleUIApp')
    .controller('AuthCtrl', function ($scope, $rootScope, $state, growl, $log, $modal, $http, authService, Restangular) {


        $scope.login = function () {
            var modalInstance  = $modal.open({
                templateUrl: 'views/login.html',
                controller: 'LoginCtrl',
                backdrop: true,
                keyboard: true,
                windowClass: 'modal-login'
            });

            modalInstance.opened.then(function () {
                $log.debug("Login modal opened");
                $scope.loginDialogOpened = true;
            });

            modalInstance.result.then(function (xusername) {
                $log.debug("got username: " + xusername + " from LoginCtrl...");
                $scope.loginDialogOpened = false;
            }, function () {
            	$log.debug('login Modal dismissed');
                $scope.loginDialogOpened = false;
            });
        }

        $scope.logout = function(){
            $log.debug("in logout");
            $http({
                method:'POST',
                url:'http://localhost:8080/Console/logout',
                params:{'ajax':true}
            })
            .success(function(data) {
                $rootScope.currentUser = null;
                $rootScope.username = null;
                $rootScope.isLoggedIn = false;    
              
                sessionStorage.clear();
                growl.addWarnMessage("You are Logged Out!");
                $state.go('home');
            })
        }

        $scope.$on('event:auth-loginRequired', function() {
        	//Prevent multiple login dialog popups when multiple 401 events fired. 
        	if(! $scope.loginDialogOpened) {
                growl.addWarnMessage("Login Required!");
                
                $rootScope.currentUser = null;
                $rootScope.username = null;
                $rootScope.isLoggedIn = false;
                
                sessionStorage.clear();
                $state.go('home');
                $scope.login();
        	}
        });

        $scope.$on('event:auth-loginConfirmed', function() {
            growl.addSuccessMessage("You are Logged in!");
            //TODO redirect to view that is requested before 401 error fired.
            $state.go('dashboard');
        });
        $scope.$on('event:auth-loginCancelled', function() {
            growl.addWarnMessage("login Cancelled!");
            $state.go('home');
        });
    })
    .controller('LoginCtrl', function ($scope, $rootScope,$window, growl, $state, $log, $http, authService, Restangular , $modalInstance) {

        // Define the initial form data.
        $scope.user = {
            username : '',
            password : '',
            remember_me : false
        };

        //$http.defaults.headers.get = { 'X-Requested-With' : 'XmlHttpRequest' };

        $scope.submit = function () {
            $log.debug("Username: " + $scope.user.username  + " password: "+ $scope.user.password + " and remember_me: " + $scope.user.remember_me);
            //TODO set _spring_security_remember_me
            $http({
                method:'POST',
                url:'http://localhost:8080/Console/j_spring_security_check',
                params:{'j_username':$scope.user.username,'j_password':$scope.user.password,'ajax':true}
                //data:{'j_username':$scope.user.username,'j_password':$scope.user.password,'ajax':true}
            })
                .success(function(data) {
                    //Data: {success: true, username: "admin"} or {error: "Sorry, we were not able to find a user with that username and password."}
                    $log.debug(data);
                    if(data.hasOwnProperty('error')){
                        $rootScope.isLoggedIn = false;
                        growl.addErrorMessage( data.error, {ttl: 30000});
                    } else if (data.hasOwnProperty('success')) {
                        $rootScope.username = data.username;
                        $rootScope.isLoggedIn = true;
                        Restangular.one('user','currentUser').get().then(function (user) {
                            $rootScope.currentUser = user;
                            
                            sessionStorage.setItem('username', $rootScope.username);
                            sessionStorage.setItem('isLoggedIn', true);
                            sessionStorage.setItem('currentUser', JSON.stringify($rootScope.currentUser));
                        });
                        authService.loginConfirmed();
                        $modalInstance.close($rootScope.username);
                    } else {
                        Restangular.one('user','currentUser').get().then(function (user) {
                            $rootScope.currentUser = user;
                            $rootScope.username = user.username;
                            $rootScope.isLoggedIn = true;
                            
                            sessionStorage.setItem('username', $rootScope.username);
                            sessionStorage.setItem('isLoggedIn', true);
                            sessionStorage.setItem('currentUser', JSON.stringify($rootScope.currentUser));
                            authService.loginConfirmed();
                            $modalInstance.close($rootScope.username);
                        });
                    }
                })
                .error(function(data) {
                    $log.error(data);
                    $rootScope.isLoggedIn = false;
                    growl.addErrorMessage(data, {ttl: 30000});
                });
        };

        $scope.cancel = function () {
            authService.loginCancelled();
            $modalInstance.dismiss('cancel');
        };

    });

header.html

            <ul class="nav navbar-nav navbar-right" ng-controller="AuthCtrl" ng-switch on="isLoggedIn">
                <li class="dropdown" ng-switch-when="true">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{username | uppercase}} <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a ng-click="notImplemented()">Settings</a></li>
                        <li><a ng-click="logout()">Logout</a></li>
                    </ul>
                </li>
                <li ng-switch-default><a  ng-click="login()">Login</a></li>
            </ul>

login.html

<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h3>Login [admin/admin]</h3>
</div>
<form name="loginForm" role="form" novalidate>
<div class="modal-body">
    <div class="form-group">
        <label class="sr-only" for="user_username">Username</label>
        <input id="user_username" type="text" class="form-control" ng-model="user.username" placeholder="Username" autofocus required/>
    </div>
    <div class="form-group">
        <label class="sr-only" for="user_password">Password</label>
        <input id="user_password" type="password" class="form-control" ng-model="user.password" placeholder="Password" required/>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" ng-model="user.remember_me"  > Remember me
        </label>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button type="submit" ng-disabled="!loginForm.$valid" class="btn btn-primary" ng-click="submit()">Sign in</button>
</div>
</form>