CODEWITHSUNDEEP
angularjsangular-ui-router
Sam
Sam

Reputation: 4484

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

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.

Upvotes: 25

Views: 23240

Answers (6)

Lapachuka
Lapachuka

Reputation: 9

Anyway resolve waiting for promise state . Best thing what you can do is return promise and add timeout for your state:

resolve: {
    AutoLoginCheck: ['$state', '$window', '$timeout', '$q', function ($state, $window, $timeout, $q) {
        var deferred = $q.defer();
        if(user.isLogin()){
             deferred.resolve();
        }else{
          $timeout(function(){
            $state.go('app.home');
          }
          deferred.reject();
        }
        return deferred.promise;
    }]

Upvotes: 0

Kinglish
Kinglish

Reputation: 23654

This is an old thread, but I use $location.path() to accomplish redirection inside of a state.resolve() block

Upvotes: 0

ptwo
ptwo

Reputation: 460

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

Upvotes: 15

Joe Hany
Joe Hany

Reputation: 1015

You can use $location.url('/') instead.

Upvotes: 13

Shyjal Raazi
Shyjal Raazi

Reputation: 507

.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.

Upvotes: 29

Karthik
Karthik

Reputation: 1377

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

You could have a controller that checks for the AuthState and have the redirection accordingly.

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

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

                   //assuming userInfoService does the authentication
                    var isAuthenticated = userInfoService.SetUserAuthenticated(true);
                    return isAuthenticated;

                }
            }]
        },
        controller: ['$state','AutoLoginCheck', function($state, AutoLoginCheck){
          if(AutoLoginCheck){
            //authenticated
            $state.go('app.home');
          } else {
            //redirect to unauthenticated page
            $state.go('....');
          }
        }]
    })

Upvotes: 0

Related Questions