Change State Of Angular App From Resolve Method Of State Provider

I'm using ui-router in my angular application. Currently I've two routes /signin & /user. Initially it shows /signin when the user clicks on the login button, I'm sending a aja

Solution 1:

I don't think it's allowed to change states in the middle of a state transition.

So, the way to address it is to have the checkLogin resolve parameter (I changed it below to userId) to be a function that either returns a value or a promise (in this case, a rejected promise, if you can't get the user-id).

You'd then need to handle this in $rootScope.$on('$stateChangeError') and check the error code.

resolve: {
   userId: function ($q, $window) {
      var userId = $window.localStorage.getItem('user-id');
      if (!userId) {
         return $q.reject("signin")
      }

      return userId;
   }
}

And redirect in the $stateChangeError handler:

$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
     if (error === "signin") {
        $state.go("signin");
     }
});

Solution 2:

If someone has this problem, you can solve it, using timeout service. It will put state switching call at the end of queue.

Also, you should use promises. Rejecting it will prevent initialization of that state:

resolve:{
    checkLogin: function(){

         var deferred = $q.defer();

         var $state = $injector.get('$state');
         if (!window.localStorage.getItem('user-id')) {
             $timeout(function(){$state.go('signin');});
             deferred.reject();
         } else {
             deferred.resolve();
         }

         return deferred.promise;
    }
},