Angular ui-router $state.go is not redirecting inside resolve

Question

In my angularjs app, I am checking if user lands on landing page and is already authenticated, then redirect him to home page.

.state('landingpage', {
            abstract: "true",
            url: "/landingpage",
            templateUrl: "app/landingpage/landingpage.html",
            resolve: {
                AutoLoginCheck: ['$state', '$window', function ($state, $window) {

                    if($window.localStorage.access_token != null)
                    {
                        if($window.sessionStorage.access_token == null) {
                            $window.sessionStorage.access_token = $window.localStorage.access_token;
                        }
                        UserInfoService.SetUserAuthenticated(true);

                        // it is not redirecting
                        return $state.go('app.home');

                    }
                }]
            }
        })

The problem is that though all the resolve code is successfully run, user is not getting redirected to app.home. Can someone tell why this happens?

Note: The state 'app' also has a resolve in which it fetches the data to be displayed in 'app.home' state.

Answer 1

.state('landingpage', {
            abstract: "true",
            url: "/landingpage",
            templateUrl: "app/landingpage/landingpage.html",
            resolve: {
                AutoLoginCheck: ['$state','$window', '$q','$timeout', function ($state, $window,$q,$timeout) {

                    if($window.localStorage.access_token != null)
                    {
                        if($window.sessionStorage.access_token == null) {
                            $window.sessionStorage.access_token = $window.localStorage.access_token;
                        }
                        UserInfoService.SetUserAuthenticated(true);


                        $timeout(function() {
                           $state.go('app.home')
                        },0);
                        return $q.reject()

                    }
                }]
            }
        })

This would work for you.

Answer 2

There can be two solutions to your problem

• Firstly you can emit an event and the listener will handle your state transition. You can implement the listener in anywhere in a parent controller

• Secondly you can implement the $stateChangeStart hook and check your redirection condition there

  $rootScope.$on('$stateChangeStart', function (event, toState) {      
       if (toState.name === 'landingpage') {              
         if (!isAuthenticated()) { // Check if user allowed to transition                  
              event.preventDefault();   // Prevent migration to default state                  
              $state.go('home.dashboard');           
          }
        }
  });