web-dev-qa-db-fra.com

Angular ui-router $ state.go ne redirige pas à l'intérieur de la résolution

Dans mon application angularjs, je vérifie si l'utilisateur atterrit sur la page de destination et est déjà authentifié, puis je le redirige vers la page d'accueil.

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

                    }
                }]
            }
        })

Le problème est que, bien que tout le code de résolution soit correctement exécuté, l'utilisateur n'est pas redirigé vers app.home. Quelqu'un peut-il dire pourquoi cela se produit?

Remarque: L'état 'app' a également une résolution dans laquelle il récupère les données à afficher dans l'état 'app.home'.

angularjsangular-ui-router
24
Sam

Il peut y avoir deux solutions à votre problème

  • Tout d'abord, vous pouvez émettre un événement et l'auditeur gérera votre transition d'état. Vous pouvez implémenter l'écouteur n'importe où dans un contrôleur parent

  • Deuxièmement, vous pouvez implémenter le hook $ stateChangeStart et y vérifier votre condition de redirection

    $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');           
        }
      }
});
15
ptwo
.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()

                    }
                }]
            }
        })

Cela fonctionnerait pour vous.

27
Shyjal Raazi

Vous pouvez utiliser $location.url('/') à la place.

13
Joe Hany

Il s'agit d'un ancien thread, mais j'utilise $ location.path () pour effectuer la redirection à l'intérieur d'un bloc state.resolve ()

0
John Tyner

Vous pouvez utiliser Resolue pour fournir à votre contrôleur un contenu ou des données personnalisés selon l'état. La résolution est une carte facultative des dépendances qui devrait être injectée dans le contrôleur.

Vous pourriez avoir un contrôleur qui vérifie l'AuthState et avoir la redirection en conséquence.

     .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('....');
          }
        }]
    })
0
Karthik

Quoi qu'il en soit, résolvez l'attente de l'état promis. La meilleure chose que vous puissiez faire est de renvoyer la promesse et d'ajouter un délai d'expiration pour votre état:

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;
    }]
0
Lapachuka