javascript - 错误: Maximum call stack size exceeded on Angular Ui Router State Change

Question

基本上我想做的是根据用户身份验证状态更改状态。

当我在没有 $rootScope 的情况下执行 $state.go(); 时，我可以重定向到页面而不会出现错误，但是当我使用

时

$rootScope.$on('$stateChangeStart', 函数 (事件) {
$state.go();
event.preventDefault()
})

下面是 Controller 代码:

DiaryDashboard.controller('AppController', 
  ['$scope', '$rootScope', '$localStorage', '$http', '$state'
  , function ($scope, $rootScope, $localStorage, $http, $state) {

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

    if ($localStorage.userdetails &&
        $localStorage.userdetails.isAuthenticated == true) {

        //Check for Authentication state
        //If not redirect to the state in the else clause
        //Populate the $rootScope with user details
        $rootScope.userdetails = $localStorage.userdetails;

        //Switch to the parent state
        $state.go();
        event.preventDefault();

    } else {

        //If User not authenticated
        //GO to the Authentication State
        $state.go('auth');
        event.preventDefault();

    }
  })

}]);

Answer 1

这里最重要的是理解这一点:

Do not redirect if not needed. Other words, if user is already redirected to intended state - we should leave... There is a working plunker with similar solution.

查看此问答:

Angularjs ui-router. How to redirect to login page

调整后的代码:

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

    var isNavigatingToAuth = toState.name === "Auth";

    if(isNavigatingToAuth){

       return; // no need to redirect 
    }

    if ($localStorage.userdetails &&
        $localStorage.userdetails.isAuthenticated == true)
    ...