Authentication on angular JS and send back to requested page.

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha0/angular-ui-router.min.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="1.3.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.6/angular-messages.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="app.js"></script>
    <script src="base.controller.js"></script>
    <script src="home.controller.js"></script>
    <script src="login.controller.js"></script>
    <script src="about.controller.js"></script>
  </head>

  <body ng-cloak="">
    <div ng-controller="navController">
    <nav class="navbar navbar-inverse" role="navigation" >
      <div class="navbar-header">
        <a class="navbar-brand" href="#/" >Angular Learning</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <li ng-if="!isAuthorized()"><a ui-sref="login">Login</a></li>
        <li ng-if="isAuthorized()" ><a href="" ng-click="logout()">Logout</a></li>
      </ul>
    </nav>
    <h3 ng-if="isAuthorized()"> Welcome {{user.username}}</h3>
    </div>
    <div ui-view=""></div>
  </body>

</html>

/* Styles go here */

USER authentication module 
related to : 

http://stackoverflow.com/questions/38137489/user-authentication-issue-unable-to-access-data-attribute-by-transitions-onent

(function () {
'use strict';
var app = angular.module('app', ['ui.router','ngMessages','ngStorage','login']);

app
  .constant('AUTH_EVENTS', {
    loginSuccess: 'auth-login-success',
    loginFailed: 'auth-login-failed',
    logoutSuccess: 'auth-logout-success',
    sessionTimeout: 'auth-session-timeout',
    notAuthenticated: 'auth-not-authenticated',
    notAuthorized: 'auth-not-authorized'
});

app
  .constant('USER_ROLES', {
    all: '*',
    admin: 'admin',
    editor: 'editor',
    guest: 'guest'
});

app.config(['$stateProvider',
            '$urlRouterProvider',
            '$httpProvider',
            '$transitionsProvider',
            '$localStorageProvider',
            'USER_ROLES', 'AUTH_EVENTS',
            function($stateProvider,
                    $urlRouterProvider,
                    $httpProvider,
                    $transitionsProvider,
                    $localStorageProvider,
                    USER_ROLES, AUTH_EVENTS) {
    $stateProvider
        .state("base", {
            url : "/",
            templateUrl: "base.html",
            controller: 'BaseController',
            data : {},
        })
        .state("home", {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'HomeController',
            data : { pageTitle : 'Home', requiresAuth: true, authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor] }
        })
        .state("about", {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutController',
            data : { pageTitle : 'About' }
        })
        .state("login", {
            url: '/login',
            templateUrl: 'login.html',
            controller: 'LoginController',
            controllerAs : 'vm',
            params : {'returnTo' : null },
            data : { pageTitle : 'Login' }
            // resolve : { returnTo : returnTo }
        });

    $urlRouterProvider.otherwise("/");
    $localStorageProvider.setKeyPrefix('');

}]);

  function returnTo ($transition$) {
      var redirectedFrom = $transition$.previous();
      // The user was redirected to the login state (via the requiresAuth hook)
      if (redirectedFrom !== null) {
          // Follow the current transition's redirect chain all the way back to the original attempted transition
          while (redirectedFrom.previous()) {
            redirectedFrom = redirectedFrom.previous();
          }
          // return to the original attempted "to state"
          return { state: redirectedFrom.to(), params: redirectedFrom.params("to") };
      }
      var fromState = $transition$.from();
      var fromParams = $transition$.params("from");
      if (fromState.name !== '') {
          return {state: fromState, params: fromParams};
      }
      // If the fromState's name is empty, then this was the initial transition. Just return them to the home state
      return { state: 'base' };
  }


app.run(['$rootScope', '$state', '$timeout', '$transitions', 'AUTH_EVENTS', 
 function ($rootScope,  $state, $timeout,  $transitions, AUTH_EVENTS, AuthService) {

        $rootScope.state = $state; // for page title
        
        $rootScope.$on(AUTH_EVENTS.loginSuccess, function(event) {
            console.log('successfull loggen in');
             $timeout(function() { $state.go($rootScope.returnTo); });
        });
        
        $rootScope.$on(AUTH_EVENTS.logoutSuccess, function(event) {
            return $state.go('base', {}, { reload: true });
        });
        
        var requiresAuthCriteria = {
          to: function (state) {
              return state.data && state.data.requiresAuth;
          }
        };

      var redirectToLogin = function($transition$, $injector) {
          var AuthService = $injector.get('AuthService');
          if (!AuthService.isAuthenticated()) {
           return $state.target('login', { returnTo : $transition$.to().name });
          } else {
              var roles =  $transition$.to().data.authorizedRoles;
              if(AuthService.isAuthorized(roles)) {
                  console.log('Authorized');
              } else {
                  return $state.target('about', undefined, { location: false });
              }
          }
      };

      $transitions.onBefore(requiresAuthCriteria, redirectToLogin, {priority: 10} );
}]);

app.controller('navController', ['$scope','$rootScope', 'AuthService', 'AUTH_EVENTS',
               function ($scope, $rootScope, AuthService, AUTH_EVENTS) {

        $scope.user = '';
        $scope.isAuthorized = function(){
            return AuthService.isAuthenticated();
        };

        $scope.user = AuthService.getCurrentUser();
        $scope.logout = function() {
            AuthService.logout();
            $rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
        };
}]);

}());

<div class="container">
  <div class="jumbotron text-center">
    <h1> The {{ title }} </h1>
     Today's date: {{ timeNow | date:'dd-MM-yyyy' }}
  </div>
</div>

(function() {
var app = angular.module('app');

var BaseController = function ($scope) {
    $scope.title = "BASE";
    $scope.timeNow = new Date().getTime();
};

app.controller('BaseController', BaseController );

}());

<div class="jumbotron text-center">
    <h1> The {{ title }} </h1>
</div>

<div class="col-lg-6" >
  <em> write 'guest' in `username` and `password` </em>
<form name="vm.loginForm"  ng-submit="vm.login(credentials)" novalidate >
  <div class="form-froup" >
    <label for="username">Username:</label>
    <input type="text" name="username" ng-model="credentials.username" ng-minlength="3" class="form-control" required placeholder="username" >
    <div ng-if="vm.loginForm.username.$touched" ng-messages="vm.loginForm.username.$error" >
          <p ng-message="minlength">username is too short.</p>
          <p ng-message="required">username is required.</p>
     </div>
   </div>
  <div class="form-group">
    <label for="password">Password:</label>
    <input name="password" type="password" ng-model="credentials.password" class="form-control" required placeholder="password">
     <div ng-if="vm.loginForm.password.$touched" ng-messages="vm.loginForm.password.$error">
          <p ng-message="required">password is required.</p>
     </div>
  </div>
  <div class="form-group">
    <button type="submit" ng-disabled="!vm.loginForm.$valid" class="btn btn-inverse btn-primary" >Login</button>
    <button type="reset" class="btn btn-warn" ng-click="vm.reset()">Reset</button>
  </div>
</form>
</div>

(function() {
'use strict';
var login = angular.module('login',[]);

login
  .controller('LoginController', function($rootScope, $stateParams, AUTH_EVENTS, AuthService){
    var self = this;
    self.login = function(credentials){
        AuthService.login(credentials).then(function(user){
            $rootScope.returnTo = $stateParams.returnTo;
            $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
            AuthService.setCurrentUser(user);
        }, function (){
            $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
        });
    };

    self.reset = function () {
      self.credentials = { };
      self.loginForm.$setPristine();
      self.loginForm.$setValidity();
      self.loginForm.$setUntouched();
    };
});


login
  .factory('AuthService', function($http, $q, $localStorage){
    var authService = {};
    var currentUser;
    authService.login = function (credentials) {
        var deferred = $q.defer();
        $http
          .get('user.json', credentials)
          .then( function (res) {
              deferred.resolve(res.data);
          }, function(error) {
            // console.log(error);
            deferred.reject(error);
          });
          return deferred.promise;
    };

    authService.logout = function () {
        var deferred = $q.defer();
        $http({
          method: "GET",
          url: 'logout.json'
        }).then(function(result) {
          // Session.destroy();
          delete $localStorage.currentUser;
          deferred.resolve(result);
        }, function(error) {
          console.log('Error');
          deferred.reject(error);
        });
        return deferred.promise;
    };

    authService.setCurrentUser = function(user) {
        $localStorage.currentUser = user;
    };

    authService.getCurrentUser = function () {
        return $localStorage.currentUser;
    };

    authService.isAuthenticated = function () {
      if($localStorage.currentUser) {
        return true;
      } else {
        return false;
      }
    };

    authService.isAuthorized = function (authorizedRoles) {
        if(!angular.isArray(authorizedRoles)) {
            authorizedRoles = [authorizedRoles];
        }
        return (authService.isAuthenticated && authorizedRoles.indexOf($localStorage.currentUser.role) !== -1 );
    };

    return authService;
});
}());

(function() {
'use strict';
angular
  .module('app')
  .controller('HomeController', function($scope,$timeout) {
        $scope.title = "Home Page";
    });
}());

{
        "id":1,
        "role":"admin",
        "username":"Alpha"
}

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
    {{ message }}
</div>

<div class="row">

    <!-- COLUMN ONE NAMED VIEW -->
    <div class="col-sm-6">
        <div ui-view="columnOne"></div>
    </div>

    <!-- COLUMN TWO NAMED VIEW -->
    <div class="col-sm-6">
        <div ui-view="columnTwo"></div>
    </div>

</div>

(function() {
"use strict";
angular
.module("app")
.controller('aboutController', function($scope) {
    $scope.message = 'About us';
});
}());

{"status": true }