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?

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

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

edited May 23 '17 at 12:05

Community

1
1

answered Jun 22 '15 at 09:38

Radim Köhler

122,561
47
239
335

This won't solve the problem as /login should auto redirected back to /dashboard if user is already logged in. – Neo Jun 22 '15 at 14:12
I created another scenarios. They should solve even this scenario... Hope it helps a bit ;) – Radim Köhler Jun 22 '15 at 15:14

score 1 · Answer 2 · answered Jun 22 '15 at 15:13

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

If the user is already logged in and comes lands localhost/ it will redirect to /login which will inturn redirect to /dashboard and the cycle dependency thing comes into picture again. — Neo, Jun 22 '15 at 17:35
I would say, that this is should not be an issue for us... here is a plunker, which starts with authenticated **`isLoggedIn: true`** user http://plnkr.co/edit/9hBxTBxrSjKjD4QdBR13?p=preview. No call stack size issues... all is working as expected. The key to success? The default/otherwise state must be public. hope it helps — Radim Köhler, Jun 22 '15 at 17:46

urlRouterProvider.otherwise conflicting with $stateChangeStart

2 Answers2