我编写了一个应用程序，我需要在应用程序运行时检索当前登录的用户信息，然后再处理路由。我用 ui-router支持多个/嵌套 View 并提供更丰富、有状态的路由。

当用户登录时，他们可能会存储一个代表其身份验证 token 的 cookie。我将该令​​牌包含在对服务的调用中以检索用户的信息，其中包括他们所属的组。然后将生成的身份设置在服务中，可以在服务中检索并在应用程序的其余部分中使用。更重要的是，路由器将使用该身份来确保他们已登录并属于适当的组，然后再将他们转换到请求的状态。

我有这样的代码:

app
    .config(['$stateProvider', function($stateProvider) {

        // two states; one is the protected main content, the other is the sign-in screen

        $stateProvider
            .state('main', {
                url: '/',
                data: {
                    roles: ['Customer', 'Staff', 'Admin']
                },
                views: {} // omitted
            })
            .state('account.signin', {
                url: '/signin',
                views: {} // omitted
            });
    }])
    .run(['$rootScope', '$state', '$http', 'authority', 'principal', function($rootScope, $state, $http, authority, principal) {

        $rootScope.$on('$stateChangeStart', function (event, toState) { // listen for when trying to transition states...
            var isAuthenticated = principal.isAuthenticated(); // check if the user is logged in

            if (!toState.data.roles || toState.data.roles.length == 0) return; // short circuit if the state has no role restrictions

            if (!principal.isInAnyRole(toState.data.roles)) { // checks to see what roles the principal is a member of
                event.preventDefault(); // role check failed, so...
                if (isAuthenticated) $state.go('account.accessdenied'); // tell them they are accessing restricted feature
                else $state.go('account.signin'); // or they simply aren't logged in yet
            }
        });

        $http.get('/svc/account/identity') // now, looks up the current principal
            .success(function(data) {
                authority.authorize(data); // and then stores the principal in the service (which can be injected by requiring "principal" dependency, seen above)
            }); // this does its job, but I need it to finish before responding to any routes/states
    }]);

如果我登录、导航、注销等，一切都按预期工作。问题是，如果我在登录时刷新或拖放到 URL 上，我会被发送到登录屏幕，因为身份服务在状态改变之前调用还没有结束。不过，在该调用完成后，如果有一个链接或某些东西指向 - 例如 - main 状态，我可以继续按预期工作，所以我就快完成了。

我知道您可以让状态在转换之前等待解析参数，但我不确定如何继续。

最佳答案

好吧，扯了很多头发之后，这就是我想出来的。

1. 如您所料，resolve 是启动任何异步调用并确保它们在状态转换到之前完成的合适位置。
2. 您需要为所有状态创建一个抽象的父状态，以确保您的resolve 发生，这样如果有人刷新浏览器，您的异步解析仍然会发生并且您的身份验证可以正常工作。您可以在 state 上使用 parent 属性来创建另一个不会通过命名/点表示法继承的状态。这有助于防止您的州名称变得难以管理。
3. 虽然您可以将所需的任何服务注入(inject)您的resolve，但您无法访问它所在状态的toState 或toStateParams试图过渡到。但是，$stateChangeStart 事件将在您的 resolve 解决之前发生。因此，您可以将 toState 和 toStateParams 从事件参数复制到您的 $rootScope，然后将 $rootScope 注入(inject)你的 resolve 函数。现在您可以访问它尝试转换到的状态和参数。
4. 一旦您解析了您的资源，您就可以使用 promises 进行授权检查，如果失败，使用 $state.go() 将它们发送到登录页面，或者做任何你需要做的事。当然，有一点需要注意。
5. 一旦在父状态完成resolve，ui-router 将不会再解析它。这意味着您的安全检查不会发生!啊!解决办法是进行两部分检查。一旦进入我们已经讨论过的 resolve 。第二次是在$stateChangeStart 事件中。这里的关键是检查资源是否已解析。如果是，请执行与在 resolve 中执行的相同的安全检查，但在事件中。如果资源未 已解析，则resolve 中的检查将拾取它。要做到这一点，您需要在服务中管理您的资源，以便您可以适本地管理状态。

一些其他杂项。备注:

• 不要试图将所有 authz 逻辑塞进 $stateChangeStart 中。虽然您可以阻止该事件并进行异步解决(这会有效地停止更改，直到您准备好)，然后尝试在您的 promise 成功处理程序中恢复状态更改，但仍有一些问题无法正常工作。
• 您不能在当前状态的 onEnter 方法中更改状态。

This plunk是一个工作示例。

关于javascript - 在运行应用程序并切换到路由或状态之前解析 $http 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19721125/