angularjs - 在 $stateChangeStart 中使用 $state.go 会导致无限循环

Question

我正在使用 AngularJS ui-router。我正在尝试为未经身份验证的用户实现保护路由。我正在检查用户是否已登录 $stateChangeStart。如果用户未登录则重定向到登录状态。

但是当我在 stateChangeStart 处理程序中使用 $state.go("login") 时，处理程序代码进入无限循环并收到控制台错误“RangeError: Maximum超出调用堆栈大小”

下面是我的代码:

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
    var allowedStates = ["signup","confirmaccount","resetPassword"];
    if(!$window.localStorage.getItem('userInfo') && !(allowedStates.includes($state.current.name)))
    {
        $state.go("login");
    }
}
);

下面是控制台错误的截图。

Answer 1

防止默认行为并在不使用 $state.current.name 的情况下检查允许的状态，因为 toState 已经是 $stateChangeStart 的参数

更新

我认为您在这里需要一个无状态更改逻辑，而不是始终重定向到登录。

$rootScope.$on('$stateChangeStart',
  function(event, toState, toParams, fromState, fromParams) {
    var noChangeStates = ["login", "signup", "confirmaccount", "resetPassword"];
    var noStateChange = noChangeStates.indexOf(toState.name) > -1;

    if (noStateChange) {
      return;
    }

    //Check for Allowed or Not Allowed logic here then redirect to Login
    if (!$window.localStorage.getItem('userInfo')) {
        event.preventDefault();
        $state.go("login")
    }
  }
);

请注意，您还应该将“登录”添加到“无状态更改”