Ui-Router $ state.go dans $ on ('$ stateChangeStart') provoque une boucle infinie

Je suis en train d'introduire de connexion dans la façon dont l'utilisateur navigue à travers l'application.

Je fais semblant de rediriger l'utilisateur vers la page où il était avant qu'il accédez à la page de connexion si la page répond à des exigences spécifiques

La prévention de l'événement à partir de l' $stateChangeStart arrêt de la modification de l'état comme prévu, mais quand je lance l' $état.aller('into_somewhere') - je entrer une infinit boucle

Mon angulaire de la version 1.3.1 et l'interface utilisateur du routeur est la dernière

.factory('RouteHistory', function ($rootScope,$log, $state, Auth, $urlRouter, $timeout) {

    //after the user enter a page
    var currentState = '';

    //when the user is trying to access a page that he has not permissions
    //or that requires the user to be logged in
    var pendingState = '';

    var isMenuTogglerVisible = false;
    var skipFromStateVal = true;

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){

      event.preventDefault();



      if (toState.name == 'login' && fromState.name != 'login'){
        $log.log('Ui-router: changing to login');
        //$urlRouter.sync();
        $state.go('login')
        //pendingState = fromState;
        //$log.log('Peding state updated to:' + pendingState.name );
        //$urlRouter.sync();
      }

      if (fromState.name == 'login' && Auth.isLoggedIn()) {
        $log.log('Ui-router: going from login');
        //$state.go(fromState.name);
        $timeout(function(){
          //$state.go('home', null, {/*reload: true, location: 'replace'*/});
          $state.go('browse-machine');
          //$urlRouter.sync();
        },2000)
      }



      $log.log({
        'toState': toState,
        'toParams': toParams,
        'fromState': fromState,
        'fromParams': fromParams
      })

    })


    return {

    };
  });

source d'informationauteur Lothre1 | 2014-11-07

  1. 10

    En général, je dirais, nous allons rediriger ($state.go()) seulement en cas de besoin. Dans d'autres cas, de sortir de l'écouteur d'événement:

    if (toState.name === 'login' ){
  //doe she/he try to go to login? - let him/her go
  return;
}

if(Auth.isLoggedIn()){
   //is logged in? - can go anyhwere
   return;
}

//else
$state.go('login')

    C'est simplifiée logique, mais montre, que l'on devrait changer à l'exécution que si nécessaire. Il y a quelques autres examles plus détaillée de la mise en œuvre et plunkers:

    Comme prévu dans le commentaire, il n'y a plunkerj'ai changé comme ça ici

    ...
//three new lines
if (toState.name === 'specialRoute'){
  return;
}

if (fromState.name=='route1'){
  event.preventDefault();
  $state.go('specialRoute')
}

    Et c'est pas boucle plus. S'il vous plaît, vérifier ici

  2. 5

    Cette réponse m'a aidé:

    $urlRouterProvider.otherwise( function($injector, $location) {
            var $state = $injector.get("$state");
            $state.go("app.home");
        });

    Original:
    Pourquoi ne AngularJS avec ui-router continuer à tirer le $stateChangeStart événement?

  3. 5

    Vous devez utiliser l'option de notification :

    $state.go('your.state',{ your params },{notify: false});

    Cela permettra d'éviter stateChangeStart à feu nouveau.

  4. 0

    J'ai simplement utilisé $location.path('every/where') au lieu de $state.go('every/where')

    🙂 .

  5. 0

    La boucle infinie est en partie causée par 

    if (toState.name == 'login' ...) { $state.go('login'); ...

    ..qui dit if vous allez l'état de connexion, then aller à l'état de connexion.

    ...Et l'appel event.preventDefault() la première ligne dans le gestionnaire d'événement n'aide pas. Lorsque vous utilisez go() pour aller à l'écran de login (ou ailleurs), ce changement d'état est aussi empêché par event.preventDefault(). Il doit être utilisé uniquement à l'intérieur d'un if.

    $StateChangeStart gestionnaire devrait plutôt être... 

    if (!Auth.isLoggedIn() && toState.name != 'login') {
    event.preventDefault();
    Auth.desiredState = toState.name;
    $state.go('login');
}

    ...qui se lit naturellement. "If vous ne l'êtes pas et que vous n'êtes pas déjà en cours à l'écran de connexion, then arrêtez ce que vous faites, je vais vous souvenez-vous où vous voulez aller, et maintenant, vous allez à l'écran de connexion."

    Plus tard, votre Auth objet émet un $state.go(Auth.desiredState) quand il est satisfait de l'utilisateur.

  6. 0

    Cela fonctionne pour moi, le code ci-Dessous permet de se débarrasser de boucle infinie

      let firstPass = true;
  $scope.$on('$stateChangeStart', function(event, toState, toParams) {
    if ($scope.addForm.$dirty && firstPass) {
      event.preventDefault();
      ConfirmationDialog.openNavigateAwayConfirmationModal().then(function () {
        firstPass = false;
        return $state.go(toState, toParams);
      });
      firstPass = true;
    }
  });