Ui-Router $state.go inside $on('$stateChangeStart') 导致无限循环state、go、Ui、Router

2023-09-06 08:25:32 作者:wǒ是尐懒虫ゞ

I'm trying to introduce login into the way the user navigates accross the application.

I pretend to redirect the user to the page were he was before he navigate to the login page if that page meets specific requirements

React 之Router路由 含5.0与6.0版本

Preventing the event from the $stateChangeStart stop's the state change like expected but when i run the $state.go('into_somewhere') i enter an infinit loop

My angular version is 1.3.1 and the ui-router is the latest

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

    };
  });

解决方案

In general I would say, let's redirect ($state.go()) only if needed. In other cases, get out from the event listener:

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

This is simplified logic, but shows, that we should change to execution only if needed. There are some other examles with more detailed implementation and plunkers:

Confusing $locationChangeSuccess and $stateChangeStart Angular UI Router: nested states for home to differentiate logged in and logged out other example of log in angular ui-router login authentication

As provided in the comment, there was plunker, which I changed like this here

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

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

And this is not looping anymore. Please, check it here