Angular ui router 超出最大调用堆栈大小答案

【问题标题】：Angular ui router Maximum call stack size exceededAngular ui router 超出最大调用堆栈大小
【发布时间】：2016-03-31 23:40:09
【问题描述】：

最近，当我在我的应用程序中实现身份验证时，我遇到了$stateChangeStart 事件的问题。我限制了对一些具有布尔值的页面的访问，如下所示：

.state('login', {
                url:'/login',
                templateUrl: 'modules/authentication/views/login.html',
                controller: 'LoginController',
                data: {
                    requireAuthentication: false
                }
            })

我想检查一下，是否有任何身份验证数据，如果用户使用requireAuthentication: true 访问路由，他会自动重定向到登录页面。所以，这是一种标准的身份验证行为。

在实施过程中，我收到了Maximum call stack size exceeded 错误。我花了四个晚上的时间来找出这 10 行代码有什么问题。

我将为那些可能会关注工作解决方案的人（如我）发布我的工作解决方案的答案。我认为这对其他成员很重要。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

所以，我有一个可行的解决方案：

angular.module('YourModule', [...dependecies...])

    .run(function($rootScope, $cookies, $state) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
        var shouldLogin = toState.data.requireAuthentication !== undefined
            && toState.data.requireAuthentication;

        // NOT authenticated - wants any private stuff
        if(shouldLogin || fromState.name === "") {
            var token = $cookies.get('JWT') == null ? null : $cookies.get('JWT');
            if (token == null) {
                if(toState.name === 'login')
                    return;
                $state.go('login');
                event.preventDefault();
            } else {
                if(toState.name === toState.name)
                    return;
                //TODO: Check token
                $state.go(toState.name);
                event.preventDefault();
            }
        }
    });
});

所以，我从$cookies 获取我的身份验证数据。如果他们是null，我会重定向到login 状态。

最重要的部分是：

fromState.name === "" 此表达式会在您第一次打开页面时触发事件处理程序

if(toState.name === toState.name)
    return;

和

if(toState.name === 'login')
    return;

这两个 if 表达式看起来很糟糕，但它们确实有效。您不会收到任何超出堆栈大小的异常。

我在 Firefox、Chrome、Opera、Mozilla 和 Yandex 浏览器中测试了上述代码，希望对你有用。

【讨论】：