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?

Try this answer: http://stackoverflow.com/questions/22537311/angular-ui-router-login-authentication It goes over in detail on how to handle states, logins, how to store auth states, etc. — Kyle, Apr 20 '16 at 21:00

Scraph · Accepted Answer · 2016-04-20T21:24:27.507

1

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

edited Apr 20 '16 at 21:24

answered Apr 20 '16 at 21:10

Scraph

175
6

I want to avoid repeat this code for ALL my states (i have a more than 10 states). – Gonzalo Pincheira Arancibia Apr 21 '16 at 14:52
Check out the code pen. You can use `secure` as a parent state for all pages that require authentication. You will see that there are two pages `secure.page1` and `secure.page2`. Both require authentication but the protection is only implemented once on `secure`. – Scraph Apr 21 '16 at 14:58
Oh! I did not understand your idea!! using the parent state for this it's a great idea! thanks! – Gonzalo Pincheira Arancibia Apr 21 '16 at 15:01

score 0 · Answer 2 · answered Apr 21 '16 at 14:55

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();
            }

        })


        }

Angular: Dealing with reload page and User Authentication

2 Answers2