Comment faire pour rediriger dans un ui-router-il de résoudre?

Je suis en train de rediriger l'intérieur d'une interface de routeur résoudre et je voulais savoir si il existe un moyen de rediriger dans un routeur de résolution. Actuellement, cela ne fonctionne pas comme on pourrait le penser.

resolver(auth, $state){
   if(!auth.isLoggedIn()){
       $state.go('noLoggedInPath');
   }
}

Comment rediriger dans un résolveur correctement ?

Mon temp hack est cela, mais je ne suis pas à l'aise avec elle.

resolver(auth, $state, $timeout){
   if(!auth.isLoggedIn()){
        $timeout(function () {

             $state.go('noLoggedInPath');
        }, 0);
   }
}
  • Je ne suis pas sûr à propos de la redirection à l'intérieur d'un programme de résolution, mais si ce que vous voulez, c'est de vérifier si l'utilisateur est connecté ou non, peut-être vous pouvez utiliser le $stateChangeStart événement à la place.
  • La raison d'utiliser le journal de vérifier dans la résolution de sorte que nous n'avons pas de préciser dans statechange l'url de ne pas vérifier.
InformationsquelleAutor Edgar Martinez | 2015-04-22
  1. 39

    Vous pouvez revenir à une promesse de votre resolver fonction qui indique si à poursuivre la navigation de l'état ou non. Si vous décidez de naviguer d'ailleurs de rejeter la promesse et de spécifier le bon état:

    resolver($q, $state, $timeout, auth) {
    var deferred = $q.defer();

    //$timeout is an example; it also can be an xhr request or any other async function
    $timeout(function() {
      if (!auth.isLoggedIn()) {
        //user is not logged, do not proceed
        //instead, go to a different page
        $state.go('noLoggedInPath');
        deferred.reject();
      } else {
        //everything is fine, proceed
        deferred.resolve();
      }
    });

    return deferred.promise;
}

    Plunkr ici.

    UPD: mise à jour du code et a ajouté plunkr. Ressemble, il ne fonctionne que si vous le mettez à l'intérieur d'un délai d'attente de la fonction.

    • Cette approche ne semble pas de redirection
    • Ok, j'ai un peu joué avec plunkr et réalisé que la redirection ne fonctionne que si elle est placée à l'intérieur de certains asynchrone en fonction (le délai est l'option la plus simple). Veuillez vérifier si cela fonctionne pour vous.
    • OK je pense que ma solution de mesure comme indiqué ci-dessus est juste la façon dont il va être pour le moment
    • Avez-vous trouvé pourquoi vous avez eu à faire cela? Je ne comprends pas pourquoi nous devons utiliser le délai d'attente pour faire ce travail. J'ai le même problème et pour y remédier j'ai utiliser le délai d'attente.
    • Je pense que vous feriez mieux de ne laisser que la redirection dans $timeout var deferred = $q.defer(); if (true) { $timeout(function() { $state.go('error'); deferred.reject(); }); } else { deferred.resolve(); } return deferred.promise;
    • la raison vous avez besoin de l' $timeout dans ce cas est parce que vous devez d'abord retourner la Promesse Angulaire de crochet sur elle, puis le rejeter (rappelez-vous, une promesse est quelque chose qui permet de s'accrocher en attendant une action asynchrone à compléter). Dans ce cas, l'action asynchrone est $timeout (à la place de $http appel).

    InformationsquelleAutor Yauheni Leichanok
  2. 46

    Yauheni réponse fonctionne, mais pour l'obtenir autour de l'étrange délai chose, vous pouvez le rejeter la promesse, et les captures que dans le $stateChangeError événement, et de faire de votre rediriger là. Comme si...

    state('admin', {
  resolve: {
    auth: function(UserService, $q, permissionService) {
      var deferred = $q.defer();
      return UserService.load().then(function(user){
        if (permissionService.can(user, {goTo: state})) {
          return deferred.resolve({});
        } else {
          return deferred.reject({redirectTo: 'some_other_state'});
        }
      });
    }
  }
});

    Et puis ui-router toujours des émissions de "stateChangeError", de sorte que vous pouvez faire quelque chose comme ça..

    $rootScope.$on('$stateChangeError', function(evt, to, toParams, from, fromParams, error) {
  if (error.redirectTo) {
    $state.go(error.redirectTo);
  } else {
    $state.go('error', {status: error.status})
  }
})
    • Cela devrait être la bonne réponse. Le resolver doit uniquement être utilisée pour résoudre ou de rejeter des dépendances.
    • nah @Kunal. C'est peut-être plus "idiomatiques", il a un problème de découpage de la logique de routage de tous sur la place. C'est pire d'un point de vue pratique. Pensez à la facilité de maintenance.
    • La logique de routage vie exactement dans les mêmes lieux, les mêmes que dans l'acceptation de réponse (ce qui est exactement 2). Vous avez un membres de fichier et une erreur catcher pour les redirections. Cette réponse juste, dit, "hey, vous êtes déjà redirection 404 et que telle dans le gestionnaire d'erreur, donc, nous allons également rediriger auth erreurs dans ce même endroit." Dans les deux cas, le "si cantAuth --> aller "quelque part" l'intention est dans le même endroit (le résolveur). Cette réponse juste, il nettoie un peu par la suppression d'un délai d'attente inutiles.
    • que faire si le gestionnaire d'erreur dépend de la page que vous êtes en train de visiter? C'est le cas d'utilisation que je parle. Dans l'application que je suis en train de travailler sur cette résultats dans la répartition de la logique. Ce qui est mauvais parce que c'est un très grand app
    • Cette réponse permet de passer à des options à votre gestionnaire d'erreur. Dans mon exemple de code, je passe dans un {redirectTo: state} objet que dit le gestionnaire d'erreur exactement l'état à atteindre. Ainsi, le gestionnaire d'erreurs de logique qui dépend de la page que vous essayez de visite, exactement comme vous le décrivez. Si vous avez besoin d'encore plus, comme dire... vous voulez passer un message personnalisé, alors je dirais juste en passant que dans de trop, comme {redirectTo: state, message: customMessage}, et votre gestionnaire d'erreur peut régler ce problème. L'infrastructure est flexible. Ou je ne suis pas la compréhension de votre problème?
    • Ah vous avez raison! Il suffit de dire au gestionnaire d'erreur où aller. Oui, qui s'occupe de mon cas d'utilisation. Et si vous avez besoin d'une action arbitraire, passer un rappel
    • Comment voulez-vous faire cela en utilisant la nouvelle API? $etat.aller semble ne pas fonctionner à l'intérieur de l' $transitions.onError gestionnaire
    • Je ne suis pas totalement sûr de nouvelles API. Mais l'exemple ci-dessus fonctionne sur $stateChangeError, pas $transitions.onError. Selon ces docs (mis à jour le 23 jours: github.com/angular-ui/ui-router/wiki), $stateChangeError ressemble encore de la place pour intercepter les erreurs. Mais peut-être que cela a changé en une nouvelle version, je suis pas d'.

    InformationsquelleAutor bwest87
  3. 7

    - Je utiliser ce

       function Check($state, $q) {
        var deferred = $q.defer();
        if (condition) {
            deferred.resolve();
        }
        else {
            deferred.reject();
        }
        return deferred.promise.catch(function () { $state.go('path'); });
    }
    • Il ne le travail! Et c'est très propre et simple! Pourquoi quelqu'un marque un moins score sur elle?
    • J'aime cette solution! très clair et facile à comprendre! @Benson, you rock! Je marque cette réponse acceptée
    • Je serait aussi le signe que cette réponse est sélectionné.
    InformationsquelleAutor Hikmat G.
  4. 2

    C'est ce que j'ai réellement faire, et je ne peux pas trouver une meilleure solution

    resolver($q, $timeout, myService) {
    if(!areParameterValuesValid() || !isEverythingLogicallyOk()){
        var deferred = $q.defer();
        $timeout(function() {
            $state.go('somewhere');
            deferred.reject();
        });
        return deferred.promise;
    } else {
        return myService.loadSomething(passingSomeParams);
    }        
}
    InformationsquelleAutor Hovo
  5. 1

    Je pense que beaucoup plus propre réponse est à renvoyer un déjà rejeté la promesse de la sorte:

    JS:

    resolver(auth, $state, $q){
   if(!auth.isLoggedIn()){
       $state.go('noLoggedInPath');
       
       //Return rejected promise
       return $q.reject();
   }
   return true;
}

    • cela ne fonctionne pas, l'état n'est pas redirigé.
    • Étrange, ça fonctionne pour moi. Peut-être qu'il a changé en un autre AngularJS/UI-Router version?
    • Je n'ai pas essayé encore, mais en fonction de ce qu'il devrait être accepté réponse: github.com/angular-ui/ui-router/issues/...
    • c'est exactement ce que ma réponse est en train de faire. Un $state.go puis retourner le refus de la promesse $q.reject(). Merci pour les infos supplémentaires!
    • Oui, c'est ce que je voulais dire, désolé @Tibo. J'étais en train de dire que la vôtre doit être accepté de répondre, parce que c'est le même que le lien que j'ai fourni.
    InformationsquelleAutor Tibo
  6. 0

    Vous pouvez utiliser le solveur de promesses de avec le redirectTo configuration

       redirectTo: function($transition$) {
      return $transition$.injector().getAsync('isNew').then(function(isNew) {
        return isNew ? 'estate.edit' : 'estate.view';
      });
    },
    InformationsquelleAutor Blowsie
  7. 0

    À l'aide résout pour cela n'a pas tout à fait pour moi. J'ai adapté la logique de ce post pour exécuter une fonction de redirection sur le données propriété de l'état de l'objet. Ensuite, vous pouvez puiser dans l' $stateChangeStart événement sur $rootScope de l'exécution du bloc du module et de l'utilisation de l'injecteur du service appeler la méthode pour le changement de l'état sur la base des conditions que vous spécifiez. Fonctionne très bien, à travers les modules.

    InformationsquelleAutor Andrew Leonardi