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

Question

I\'m trying to block all ui-router state changes until I\'ve authenticated the user:

$rootScope.$on(\'$stateChangeStart\', function (event, next, toParams) {         


        

Answer 1

Try changing your run block to this:

    app.run([
             '$rootScope', '$log','$state','$interval',
    function ($rootScope,   $log,  $state,  $interval) {
      var authenticated = false;
      $rootScope.$on('$stateChangeStart', function (event, next, toParams) {
        if (!authenticated) {
          event.preventDefault()
          //following $timeout is emulating a backend $http.get('/auth/') request
        }
      })


      var intervalCanceller = $interval(function() {
        //backend call
        if(call succeeds & user authenticated) {
          authenticated = true;
          $interval.cancel(intervalCanceller);
          $state.go(next, toParams);
        }
      }, 3000);
    }
  ])