如何修复“超出最大调用堆栈大小”AngularJS

IT技术 javascript angularjs angular-ui-router
2021-03-13 06:18:47

我正在使用 AngularJs 和 Ui-Router,我正在尝试设置两个不同的主页,一个用于已登录的用户,另一个用于未登录的用户。但我收到以下错误:

RangeError: Maximum call stack size exceeded

我跑了console.trace(),我可以看到有一个问题导致状态无限循环(或类似的东西)。但是我不知道如何解决它。

这是产生错误的代码。

.run(function ($rootScope, $state, $location, Auth) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState) {
      if(fromState.name === "") {
        if (Auth.isLoggedIn()) {
            $state.go('main');
            event.preventDefault();
        } else {
          $state.go('welcome');
          event.preventDefault();
        }
      } else {
         if (toState.authenticate && !Auth.isLoggedIn()) {
             $location.path('/login');
             event.preventDefault();
         }
      }
    });

据我所知,它似乎源于 if(fromState.name === "")

2个回答

我创建了一个示例,使用默认页面和 auth/unauth 用户。类似的问题可以在这里看到

首先,这将是听众:

app.run(function ($rootScope, $state, $location, Auth) {

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

      var shouldLogin = toState.data !== undefined
                    && toState.data.requireLogin 
                    && !Auth.isLoggedIn ;

      // NOT authenticated - wants any private stuff
      if(shouldLogin)
      {
        $state.go('login');
        event.preventDefault();
        return;
      }


      // authenticated (previously) comming not to root main
      if(Auth.isLoggedIn) 
      {
        var shouldGoToMain = fromState.name === ""
                          && toState.name !== "main" ;

        if (shouldGoToMain)
        {
            $state.go('main');
            event.preventDefault();
        } 
        return;
      }

      // UNauthenticated (previously) comming not to root public 
      var shouldGoToPublic = fromState.name === ""
                        && toState.name !== "public"
                        && toState.name !== "login" ;

      if(shouldGoToPublic)
      {
          $state.go('public');console.log('p')
          event.preventDefault();
      } 

      // unmanaged
    });
});

怎么了?

  • 我们检查用户是否已登录。如果没有,但需要访问非公开内容……我们重定向到登录
  • 用户已登录但未直接进入主界面...我们将他转移
  • 用户未登录,但未公开……我们重定向
  • 否则……就这样吧

这里是状态:

  $stateProvider
    // available for anybody
    .state('public',{
        url : '/public',
        template : '<div>public</div>',
    })
    // just for authenticated
    .state('main',{
        url : '/main',
        template : '<div>main for authenticated</div>',
        data : {requireLogin : true },
    })
    // just for authenticated
    .state('other',{
        url : '/other',
        template : '<div>other for authenticated</div>',
        data : {requireLogin : true },
    })
    // the log-on screen
    .state('login',{
        url : '/login',
        templateUrl : 'tpl.login.html',
        controller : 'LoginCtrl',
    })

在此处此处检查plunker

使用 $state.go("main", {}, {notify:false}); 不通知“$stateChangeStart”事件。

  // NOT authenticated - wants any private stuff
  if(shouldLogin)
  {
    $state.go("main", {}, {notify:false});
    event.preventDefault();
    return;
  }


  // authenticated (previously) comming not to root main
  if(Auth.isLoggedIn) 
  {
    var shouldGoToMain = fromState.name === ""
                      && toState.name !== "main" ;

    if (shouldGoToMain)
    {
        $state.go("main", {}, {notify:false});
        event.preventDefault();
    } 
    return;
  }
这个解决方案在我看来更简单。它也完美地工作。
2021-04-29 06:18:47