javascript - UI-Router 状态 : How to make app. 使用 $rootScope.$ 在缩小安全上运行

Question

我在我的应用程序中使用 UI-Router 并检查状态顺序是否正确，我使用如下代码:

.value('myRouteSteps', [
      { uiSref: 'myRoute.home', valid: true },
      { uiSref: 'myRoute.pageOne', valid: false },
      { uiSref: 'myRoute.pageTwo', valid: false },

])
.run([
        '$rootScope',
        '$state',
        'myRouteSteps',
        function ($rootScope, $state, myRouteSteps) {


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

                var canGoToStep = false;

                var toStateIndex = _.findIndex(myRouteSteps, function (myRouteStep) {
                    return myRouteStep.uiSref === toState.name;

                });

                console.log('toStateIndex', toStateIndex)
                if (toStateIndex === 0) {
                    canGoToStep = true;
                } else {
                    canGoToStep = myRouteSteps[toStateIndex - 1].valid;
                }
                console.log('canGoToStep', toState.name, canGoToStep);

                // Stop state changing if the previous state is invalid
                if (!canGoToStep) {
                    // Abort going to step
                    event.preventDefault();
                }
            });
        }
]);

我在线 $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 遇到错误如果我缩小。

所以我将其更改为 $rootScope.$on('$stateChangeStart', ['event','toState','toParams','fromState','fromParams', function (event, toState, toParams, fromState, fromParams) {

但我仍然收到错误。

更新:

当我查看缩小的代码时，我看到了这一点:

}]).run(["$rootScope", "$state", "orderSteps", function (n, t, i) {
        n.$on("$stateChangeStart", function (n, t) {
            var r = !1,
                u = _.findIndex(i, function (n) {
                    return n.uiSref === t.name

我想这是不对的...如何解决？有什么建议吗？

Answer 1

_.findIndex 在未找到的情况下可以返回 -1。 0 是数组中的第一项，未找到 -1。这会导致这里出现问题

if (toStateIndex === 0) {
    canGoToStep = true;
} else {
    canGoToStep = myRouteSteps[toStateIndex - 1].valid;
}

当toStateIndex为-1时，您将获得超出范围异常的索引。

你可能想要这样的东西:

if (toStateIndex < 0) {
    canGoToStep = true;
} else {
    canGoToStep = myRouteSteps[toStateIndex].valid;
}

解释一下这是如何发生的...当您第一次加载页面时，UI 路由器在尝试转到 '' 时将转到 '' 状态> 它触发$stateChangeStart。 _.findIndex 在 myRouteSteps 中找不到 ''，并且 toStateIndex 变为 -1。 -1 不等于 0，因此它属于 else block ，-1 - 1 是 -2，myRouteSteps[-2] 超出范围。