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) {
  if (!authenticated) {
    event.preventDefault()
    //following $timeout is emulating a backend $http.get('/auth/') request
    $timeout(function() {
      authenticated = true
      $state.go(next,toParams)
    },1000)
  }
})

I reject all state changes until the user has been authenticated, but if I go to an invalid URL that uses the otherwise() configuration, I get an infinite loop with a message:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 7; oldVal: 6"],["fn: $locationWatch; newVal: 8; oldVal: 7"],["fn: $locationWatch; newVal: 9; oldVal: 8"],["fn: $locationWatch; newVal: 10; oldVal: 9"],["fn: $locationWatch; newVal: 11; oldVal: 10"]]

Below is my SSCCE. Serve it up with python -m SimpleHTTPServer 7070 and go to localhost:7070/test.html#/bar to see it explode in your face. Whereas directly navigating to the only valid angularjs location does not blow up localhost:7070/test.html#/foo:

<!doctype html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
  </head>
  <body ng-app="clientApp">
    <div ui-view="" ></div>

    <script>
      var app = angular.module('clientApp', ['ui.router'])

      var myRouteProvider = [
                '$stateProvider', '$urlRouterProvider',
        function($stateProvider,   $urlRouterProvider) { 
          $urlRouterProvider.otherwise('/foo');
          $stateProvider.state('/foo', {
            url: '/foo',
            template: '<div>In Foo now</div>',
            reloadOnSearch: false
          })
        }]
      app.config(myRouteProvider)

      var authenticated = false
      app.run([
                 '$rootScope', '$log','$state','$timeout',
        function ($rootScope,   $log,  $state,  $timeout) {
          $rootScope.$on('$stateChangeStart', function (event, next, toParams) {
            if (!authenticated) {
              event.preventDefault()
              //following $timeout is emulating a backend $http.get('/auth/') request
              $timeout(function() {
                authenticated = true
                $state.go(next,toParams)
              },1000)
            }
          })
        }
      ])
    </script>
  </body>
</html>

Is there an alternative method I should use to accomplish this authentication blocking? I do realize this authentication blocking is client side only. I'm not showing the server side of things in this example.

This isn't a direct solution to your question, but you should checkout [this article](https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec) about different auth techniques in Angular. One of the sections shows how to implement with uiRouter and `$stateProvider`. — Terry, Jul 31 '14 at 18:48
Thank you Terry. I'm actually using a bastardized version of that exact article for my authentication, which is probably my issue. I just reduced my code to the above in order to post it on StackOverflow. — Ross Rogers, Jul 31 '14 at 18:51

score 48 · Answer 1 · answered Sep 09 '14 at 23:37

48

Looks like this is a bug with ui-router when you use the combination of $urlRouterProvider.otherwise("/foo) with the $stateChangeStart.

Issue - https://github.com/angular-ui/ui-router/issues/600

Frank Wallis provides a nice workaround, use the longer form of the otherwise method that takes a function as an argument:

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

Nice work Frank!

answered Sep 09 '14 at 23:37

George S

630
1
4
6

I wish I found this post a day earlier ! I've tried Ross' solution but yours did the trick, thanks a ton ! – cl3m Jun 01 '15 at 18:01
I believe this is the correct fix based on the [documentation](https://github.com/angular-ui/ui-router/wiki/URL-Routing#otherwise-for-invalid-routes). – Josh McKearin Jun 18 '15 at 06:39
Worked perfectly. just the solution i needed. thanks – Kxng Kombian Sep 30 '15 at 08:55

Ross Rogers · Accepted Answer · 2014-07-31T19:05:25.150

Fakeout. This is an interaction issue between $urlRouterProvider and $stateProvider. I shouldn't be using $urlRouterProvider for my otherwise. I should be using something like:

$stateProvider.state("otherwise", {
    url: "*path",
    template: "Invalid Location",
    controller: [
              '$timeout','$state',
      function($timeout,  $state ) {
        $timeout(function() {
          $state.go('/foo')
        },2000)
      }]
});

Or even a transparent'ish redirect:

$stateProvider.state("otherwise", {
    url: "*path",
    template: "",
    controller: [
              '$state',
      function($state) {
        $state.go('/foo')
      }]
});

Altogether now:

<!doctype html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
  </head>
  <body ng-app="clientApp">
    <div ui-view="" ></div>

    <script>
      var app = angular.module('clientApp', ['ui.router'])

      var myRouteProvider = [
                '$stateProvider',
        function($stateProvider) { 

          $stateProvider.state('/foo', {
            url: '/foo',
            template: '<div>In Foo now</div>',
            reloadOnSearch: false
          })

          $stateProvider.state("otherwise", {
              url: "*path",
              template: "",
              controller: [
                        '$state',
                function($state) {
                  $state.go('/foo')
                }]
          });
        }]
      app.config(myRouteProvider)

      var authenticated = false
      app.run([
                 '$rootScope', '$log','$state','$timeout',
        function ($rootScope,   $log,  $state,  $timeout) {
          $rootScope.$on('$stateChangeStart', function (event, next, toParams) {
            if (!authenticated) {
              event.preventDefault()
              //following $timeout is emulating a backend $http.get('/auth/') request
              $timeout(function() {
                authenticated = true
                $state.go(next,toParams)
              },1000)
            }
          })
        }
      ])
    </script>
  </body>
</html>

I think you save my life with this state called "otherwise" =) — Sandro Simas, Jan 13 '15 at 05:12
I already had an otherwise. For me, the fix was to make a state called default that had a url of '' that set a $state.go('home') in the controller. — Owen, Apr 16 '15 at 18:16

score 2 · Answer 3 · answered Jun 23 '15 at 09:05

I also had this issue. Below is the code to workaround, which inspired by angular-permission project.

The main concept is to add a flag($$finishAuthorize) into state manually, and break the infinite loop by this flag. Another point we need to be aware is the {notify: false} option of $state.go, and broadcast "$stateChangeSuccess" event manually.

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if (toState.$$finishAuthorize) {
        return;
    }
    if (!authenticated) {
        event.preventDefault();
        toState = angular.extend({'$$finishAuthorize': true}, toState);

        // following $timeout is emulating a backend $http.get('/auth/') request
        $timeout(function() {
            authenticated = true;
            $state.go(toState.name, toParams, {notify: false}).then(function() {
                $rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
            });
        },1000)
    }
);

score 1 · Answer 4 · answered Apr 01 '15 at 20:28

I also had this issue. Turns out it was the code that they suggested to make a trailing slash optional at https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes

$urlRouterProvider.rule(function ($injector, $location) {
  var path = $location.url();

  console.log(path);
  // check to see if the path already has a slash where it should be
  if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
    return;
  }

  if (path.indexOf('?') > -1) {
    return path.replace('?', '/?');
  }

  return path + '/';
});

changed this to

$urlRouterProvider.rule(function ($injector, $location) {
  var path = $location.url();
  // check to see if the path already has a slash where it should be
  if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
    return;
  }
  if (path.indexOf('?') > -1) {
    $location.replace().path(path.replace('?', '/?'));
  }
  $location.replace().path(path + '/');
});

not returning the new path and just replacing it doesn't trigger a StateChangeStart

Neeraj Kumar Singh · Answer 5 · 2014-07-31T18:40:25.767

0

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);
    }
  ])

edited Jul 31 '14 at 18:40

answered Jul 31 '14 at 18:05

Neeraj Kumar Singh

68
7

Did you give that a try? When I do what you suggested, it still fails. The original `$timeout` doesn't even fire before the error shows up, so I'm not quite sure how `$interval` firing the function more than once will help. Also, if the `$stateChangeStart` callback function terminates immediately, the state will change. I don't need to call `$state.go()` as doing nothing at all in the function should cause the state to transition. – Ross Rogers Jul 31 '14 at 18:10
Blocks of code don't format well in comments. Want to put that in your original answer? Just click `edit` above. – Ross Rogers Jul 31 '14 at 18:32
@Ross Rogers :Don't call $state.go inside stageChange event handler. That's the reason why it is going in loop. – Neeraj Kumar Singh Jul 31 '14 at 18:36
Neeraj, did you give that a try in context? My original code doesn't even call the `$state.go()` function before the error is thrown. If I comment out the `$state.go()` completely, it still fails. – Ross Rogers Jul 31 '14 at 18:44
Check this out: http://plnkr.co/edit/Jm5JG9Ydm5qS3GSW2jWR. Tell me if it solves your issue. – Neeraj Kumar Singh Jul 31 '14 at 18:54
Unfortunately, the essence of this problem has to do with `$location`/`window.location` manipulation, so embedding that into a plnkr doesn't exhibit the issue. If I copy and paste your solution into a file and then serve it up on a webserver ( e.g. python's SimpleHTTPServer), then your code still fails. – Ross Rogers Jul 31 '14 at 19:00

score 0 · Answer 6 · edited May 23 '17 at 12:09

I tried the above solutions, with varying degrees of success (am building an Ionic cordova application). At one point I managed to not get infinite loops and the state would change but I was left with a blank view. I added { reload:true } and it seems to help. I tried with { notify:false } and { notify: true } and that did not help.

I ended up using most of the answer from: https://stackoverflow.com/a/26800804/409864

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

  // Do not redirect if going to an error page
  if (toState.name === 'app.error') {
    return;
  }

  // Do not redirect if going to the login page
  if (toState.name === 'app.login') {
    return;
  }

  // Do not redirect if there is a token present in localstorage
  var authData = localstorage.getItem('auth');
  if (authData.token) {
    return;
  }

  // We do not have a token, are not going to the login or error pages, time to redirect!
  event.preventDefault();
  console.debug('No auth credentials in localstorage, redirecting to login page');
  $state.go('engineerApp.home', {}, {reload: true}); // Empty object is params
});

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

6 Answers6

Linked