AngularJS $state.go executes before previous state

Question

I am using AngularJS, ui-router and $resource for RESTful webservices.

A button in html view is clicked that calls below function i.e. $scope.login(). Consequently a REST service (through $resource) is called and returns a user in case user/pass are correct,

$scope.login = function() {
myfactory.get({
        email: $scope.user.email,
        password: $scope.user.password
    },function(user) {
        accessmgr.grantAccess(user);      //Line of interest - loi1
        $state.go('app.dashboard-v1');    //Line of interest2 - loi2
    }, function(x) {
        if (x.status == 401)
            $scope.authError = 'Email or Password not right';
        else
            $scope.authError = 'Server Error! Are you connected to internet?';
    });
}

in case above successfully executes, another factory function (loi1 above) is called to store user instance in $localStorage as below;

myapp.factory('accessmgr', function($localStorage) {
    //var User = {};
    return {grantAccess: function(usr) {
            $localStorage.user = usr;
        }
    }});

and ui-router $scope.go(...) takes the user to dashboard.

Problem: Sometimes $state.go(...) executes before accessmgr.grantAccess(...) causing exceptions as the new state reads user from $localStorage that is not yet written. Reload the page manually solves the problem.

Any help would be really appreciated.

Answer 1

ngStorage's $localStorage cannot be referred directly without using watchers (not recommended as per here, alternatively it can to be passed as a reference to hook to $scope as mentioned as recommended approach here.

For me, I was using $localStorage through a factory and I tied it to rootScope as below;

$rootScope.$storage = $localStorage;

and consequently

myapp.factory('accessmgr', function($localStorage) {
  $rootScope.$storage = $localStorage;
  return {
    grantAccess: function(usr) {
        $rootScope.$storage.user = usr;
      },
    getUser: function() {
        return $rootScope.$storage.user;
      }
  }});

Answer 2

localStorage itself works in synchronous manner, but ngStorage's $localstorage doesn't. The latter is intended to be used in conjunction with scope and is tied to Angular digest cycles. My guess is that

myapp.factory('accessmgr', function($localStorage) {
    return {grantAccess: function(usr) {
            $localStorage.user = usr;
            $localStorage.$apply();
        }
    }});

may help. ngStorage doesn't really shine when being used like this, probably JS generic library like store.js applies better.

A good alternative is to use model that acts as single source of truth and dumps the data to localStorage under the hood. Depending on the scale of the project, js-data-angular can be considered a solid solution for that.