Ui-Router $state.go inside $on('$stateChangeStart') is cauzing an infinite loop

Question

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

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 {

    };
  });

Answer 1

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

Answer 2

You should use the notify option :

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

This will prevent stateChangeStart to fire again.

Answer 3

This answer helped me:

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

Original: Why does AngularJS with ui-router keep firing the $stateChangeStart event?

Answer 4

I simply used $location.path('every/where') instead of $state.go('every/where')

:) .