Angular UI Router的$ state.go无法按预期工作

Question

这是问题的Plunker链接。我配置了3种状态：signup，signin＆amp; todos。我已经在附加run事件的情况下配置了$stateChangeStart块，以确保在用户未登录时我重定向到signin页面。在我的项目中，我使用AuthencationService进行验证但我已评论该部分以简化示例。

理想情况下，如果我的理解是正确的，$stateChangeStart将会在每次状态变更时被调用。它也会在加载应用程序时调用。因此，无论我点击哪个州，我都应该被重定向到signin州，因为我这里没有任何AuthenticationService项检查。我写了console.log来检查它＆amp;它被称为。

console.log('User is not signed in !! Sign-in please.');

当应用程序加载时（这里加载了plunker），console.log正在打印

但是下一个声明$state.go('signin' , {}, {notify: false});没有查看signin页面。

WTF？

我已经评论event.preventDefault();尽管知道它的用途。如果我使用它，那么没有任何东西被加载，甚至 todos 页面！

Answer 1

保持通知，使用event.preventDefault()并注意无限循环

https://plnkr.co/edit/pHLyUwCXBG4KwWdmI3l8?p=preview

编辑：详细说明无限循环。您设置简单条件以检查用户是否已登录。如果没有，您想将其重定向到signin页面。但是，此检查也会触发signin状态，因此您将获得无限循环的重定向。只需添加简单if即可检查currentState是否为signin状态，您要重定向。

event.preventDefault()是停止状态转换的正确方法，因此请将其取消注释。

Answer 2

notify:false会阻止$stateChangeStart和$stateChangeSuccess被解雇，因此转换将永远不会完成，因为只有在$stateChangeSuccess事件被触发后才会加载。

查看this Github issue以查看在$stateChangeStart eventListener中进行重定向的方法。基本上，您必须在使用$stateChangeStart后手动广播notify:false事件。我目前正在使用这种方法，它的效果非常好。需要注意的是，这是一个非常具体的用例，我需要暂时暂停转换以加载数据并构建新的URL。在大多数情况下，notify:false是一种应该避免的反模式。确保你有充分的理由使用它并完成解决它的问题。

Answer 3

为避免无限循环，您可以使用$changeStateSuccess，但为了被解雇，您还需要将notify更改为true（您可以阅读更多here）

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    //If user is not signed in
        //if (!$rootScope.authentication.user) {
            console.log('User is not signed in !! Sign-in please.');
            // event.preventDefault();
            $state.go('signin' , {}, {notify: true});
         //}
});