urlRouterProvider.otherwise conflicting with $stateChangeStart

Question

I don't have a root / state. My root state is

$urlRouterProvider.otherwise('/dashboard');

and in $stateChangeStart if user is not logged in i redirect to login

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
    var requireLogin = toState.data && toState.data.access!=undefined;
    if (requireLogin && !Auth.isLoggedIn() {
        $rootScope.redirectState =  toState.name;//Auto redirect to the state
        event.preventDefault();
        $state.go('login');
        return;
    }
});

This works fine if I directly hit /dashboard but if i hit / it gets redirected to /dashboard which internally get redirected to /login till which is fine, but after that it gets redirected to /dashboard and /login again and again.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (angular.js:63)
    at Scope.$get.Scope.$digest (angular.js:14346)
    at Scope.$get.Scope.$apply (angular.js:14571)
    at bootstrapApply (angular.js:1455)
    at Object.invoke (angular.js:4203)
    at doBootstrap (angular.js:1453)
    at bootstrap (angular.js:1473)
    at angularInit (angular.js:1367)
    at HTMLDocument.<anonymous> (angular.js:26304)
    at jQuery.Callbacks.fire (jquery.js:3099)

Any idea on how to solve this?

Answer 1

In case that we need to

• go to login if not authenticated
• go to dashboard if authenticated

we can updated this event handler:

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

  var isGoingToLogin = toState.name === "login";

  if (isGoingToLogin && Auth.isLoggedIn)
  {
      event.preventDefault(); 
      $state.go('dashboard');  

      return;
  }

  if (isGoingToLogin || Auth.isLoggedIn)
  {
      return;
  }

  var requireLogin = toState.data && toState.data.access !== undefined;

  if (requireLogin) {

    $rootScope.redirectState = toState.name; //Auto redirect to the state

    event.preventDefault(); 
    $state.go('login');

    return;
  }
});

And again use two approaches:

I. State 'dashboard' is public. Check it in this working plunker

.state('dashboard', {
    url: "/dashboard",
    templateUrl: 'tpl.html',
    data: {
        //access: true
    },
})

II. Or redirect to 'login' - the other solution plunker

//$urlRouterProvider.otherwise('/dashboard');
$urlRouterProvider.otherwise('/login');

Answer 2

Solution here is to use one of these. I created plunkers for both, based on this Q & A: How can I fix 'Maximum call stack size exceeded' AngularJS

I. State 'dashboard' is public. Check it in this working plunker

.state('dashboard', {
    url: "/dashboard",
    templateUrl: 'tpl.html',
    data: {
        //access: true
    },
})

II. Or redirect to 'login' - the other solution plunker

//$urlRouterProvider.otherwise('/dashboard');
$urlRouterProvider.otherwise('/login');

The point is, the otherwise should be really free of any limitations. It should be some public page ... if there is any... or directly the login. That's the point