在运行应用程序并切换到路由或状态之前解析$ http请求

Question

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

当用户登录时,他们可以存储表示其身份验证令牌的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状态),我可以按预期继续工作,所以我几乎就在那里.

我知道你可以在转换之前让状态等待解析参数,但我不知道如何继续.

Answer 1

好吧,经过多次拔毛,这就是我想到的.

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

其他一些misc.笔记:

• 不要试图将所有authz逻辑塞进去$stateChangeStart.虽然您可以阻止事件并执行异步解析(在您准备好之前有效地停止更改),然后尝试在promise承诺成功处理程序中恢复状态更改,但是存在一些阻止其正常工作的问题.
• 您无法在当前状态的onEnter方法中更改状态.

这个插件是一个工作的例子.