AngularJS应用程序初始化之前的$ http请求？

Question

为了确定用户的会话是否经过身份验证,我需要在加载第一个路由之前向服务器发出$ http请求.在加载每个路由之前,身份验证服务会检查用户的状态以及路由所需的访问级别,如果用户未针对该路由进行身份验证,则会重定向到登录页面.然而,当第一次加载应用程序时,它不知道用户,因此即使他们有经过身份验证的会话,它也将始终重定向到登录页面.所以为了解决这个问题,我试图向服务器请求用户状态作为应用程序初始化的一部分.问题是显然$ http调用是异步的,那么在请求完成之前我如何阻止应用程序运行？

我对Angular和前端开发很新,所以我的问题可能是对javascript而不是Angular的误解.

Answer 1

您可以通过resolve在routingProvider中使用来实现这一目标.

这允许您在启动控制器之前等待一些承诺得到解决.

从文档引用:

resolve - {Object.=} - 应该注入控制器的可选依赖关系映射.如果这些依赖项中的任何一个是promise,路由器将等待它们全部被解析或者在实例化控制器之前被拒绝.如果成功解决了所有promise,则会注入已解析的promise的值并触发$ routeChangeSuccess事件.

简单的例子

    app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
            myVar: function($q,$http){
                var deffered = $q.defer();

                    // make your http request here and resolve its promise

                     $http.get('http://example.com/foobar')
                         .then(function(result){
                             deffered.resolve(result);
                          })

                return deffered.promise;
            }
        }}).
        otherwise({redirectTo: '/'});
}]);

然后将myVar注入到包含promise数据的控制器中.

避免额外的DI参数

您还可以通过返回您要注入的服务来避免额外的DI参数:

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
                myService: function($q,$http,myService){
                  var deffered = $q.defer();

                      /*  make your http request here
                      *   then, resolve the deffered's promise with your service.
                      */

                  deffered.resolve(myService),

                  return deffered.promise;
                }
            }}).
            otherwise({redirectTo: '/'});
    }]);

显然,在执行此类操作时,您必须将请求的结果存储在共享服务中的任何位置.

看看Angular Docs/routeProvider

我从egghead.io的那个人那里学到了很多东西