urlRouterProvider.otherwise 与 $stateChangeStart 冲突

Question

我没有/ 状态的根。我的根状态是

$urlRouterProvider.otherwise('/dashboard');

如果用户未登录，则在$stateChangeStart 中我重定向到登录

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

如果我直接点击/dashboard，这可以正常工作，但如果我点击/，它会被重定向到/dashboard，内部会被重定向到/login，直到这很好，但之后它会被重定向到/dashboard和/login 一遍又一遍。

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)

你知道如何解决这个问题吗？

Answer 1

这里的解决方案是使用其中之一。基于此问答，我为两者创建了 plunker：How can I fix 'Maximum call stack size exceeded' AngularJS

我。状态 'dashboard' 是公开的。签到this working plunker

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

二。或重定向到 'login' - other solution plunker

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

关键是，否则应该真的没有任何限制。它应该是一些公共页面......如果有的话......或者直接登录。这就是重点

Answer 2

如果我们需要

• 如果未通过身份验证，请登录
• 如果通过身份验证，请转到仪表板

我们可以更新这个事件处理程序：

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

再次使用两种方法：

我。状态“仪表板”是公开的。签到this working plunker

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

二。或重定向到“登录” - other solution plunker

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