Angular: Dealing with reload page and User Authentication

Question

I've been working in a application that log a user. Once that the user is logged, the info of the user is stored in a service and a cookie is stored with the auth token. Like this:

angular
 .module('MyModule')
 .service('AuthService', service);

service.$inject = ['$cookieStore', '$resource'];

function service($cookieStore, $resource){
  var self = this,
      user = null; 

  self.loginResource = $resource('my_path_to_login_resource');

  self.login = login;
  self.getUser = getUser;
  self.reloadUser = reloadUser; 


  function login(_userCredentials){
    var userResource = new self.loginResource(_userCredentials);
    return userResource.$save()
           .then(setUser);
  }

  function setUser(_userResponse){
    user = _userResponse.toJSON();
  }

  function getUser(){
    return user;
  }

  function reloadUser(_token){
    return self.loginResource()
            .get(_token)
            .then(setUser);
  }

}

Using ui-router when I need deal with the routes of the app I do this: angular .module('MyModule') .run(runFn);

  runFn.$inject = ['$state', '$rootScope', 'AuthService', '$cookieStore'];
  function runFn($state, $rootScope, AuthService, $cookieStore) {

    $rootScope.$on('$stateChangeSuccess', stateTransitioned);

    function stateTransitioned(e, toState, toParams, fromState, fromParams) {
      var pageRealoaded = fromState.name? false : true;
      if(AuthService.getUser()){
        //DEALING WITH STATES TRANSITIONS
      }
      else{
         if($cookieStore.get('auth_token') && pageRealoaded){

            //ENSURE THAT THE USER IS LOGGED WHEN THE STATE IS CHANGED
            AuthService.reloadUser.then(function(){
              $state.go(toState.name);
            })
            .catch($state.go.bind(null,'login'));


           //I DON'T KNOW HOW AVOID THAT THE STATE IS LOADED UNTIL THE USER
           //HAVE BEEN LOGGED
         }
         else{
           $state.go('login');
         }
      }

    }
  }

When the page is reloaded, using the stored token, I try to waiting that user have been login, and then, if it's success, redirect to state toState.name, and if error, redirects to login. My questions:

1. How to avoid that the state is loaded until the user have been login?

2. My architecture for dealing for this case are correct? Suggestions for better sctructure?

Answer 1

Finally, for my first question, I create the following example that shows how I prevent that the state change until the user is logged successfully.

http://codepen.io/gpincheiraa/pen/zqLYZz

In this example, when i go to the "state3", i wait until the user is login, and then redirects to the state

angular
  .module('exampleApp', ['ui.router']);

angular
  .module('exampleApp')
  .config(configFn);

configFn.$inject = ['$stateProvider', '$urlRouterProvider'];

    function configFn($stateProvider, $urlRouterProvider){
      $urlRouterProvider.otherwise('state1');
        $stateProvider
         .state('state1', {
             url: '/state1',
           controller: ['$state', function($state){
               var  vm = this;
                 vm.current = $state.current.name;
                 vm.goTwo = function(){$state.go('state2');};
             }] ,
             controllerAs: 'one',
             template: '<h1>{{one.current}}</h1><button ng-click="one.goTwo()">Go to state 2</button>'
         })
        .state('state2', {
             url: '/state2',
           controller: ['$state', function($state){
               var  vm = this;
                 vm.current = $state.current.name;
                 vm.goThree = function(){$state.go('state3');};
             }] ,
             controllerAs: 'two',
             template: '<h1>{{two.current}}</h1><button ng-click="two.goThree()">Go to state 3</button>'
         })
        .state('state3', {
             url: '/state3',
           controller: ['$state', function($state){
               var  vm = this;
                 vm.current = $state.current.name;
             }] ,
             controllerAs: 'three',
             template: '<h1>{{three.current}}</h1>'
         })

    }

    angular
     .module('exampleApp')
     .run(runFn);
    runFn.$inject  = ['$rootScope','$timeout','$state'];
    function runFn($rootScope, $timeout, $state){

        var logged = false;

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
            console.log(toState.name);
            if(toState.name === 'state3' && !logged){

                //Fake like a user take a 1 second to login in server
                $timeout(function(){
                    logged = true;
                    console.log('login ok');
                    $state.go(toState.name);
                },1000)
                console.log('while the user not loggin, prevent the state change');
                event.preventDefault();
            }

        })


        }

Answer 2

I would recommend you use the resolve functionallity of ui-router to to ensure that user is ALWAYS authenticated before entering a state.

See the ui-router wiki here: https://github.com/angular-ui/ui-router/wiki#resolve

Something like this should prevent state entry before authentication.

.state('secure', {
    resolve: {
        user: function(AuthService, $state) {
            // State will only be entered if this resolves.
            return AuthService.resolveUser()
                .catch(function(error) {
                    $state.go('login');
                })
       }
    },
    template: '<div>Secret Page</div>
})

I also threw together this pen with a working example: http://codepen.io/marcus-r/pen/eZKbYV?editors=1010