一尘不染

AngularJS应用初始化之前的$ http请求?

angularjs

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

我对Angular和前端开发总体而言是新手,所以我的问题可能是对javascript而不是Angular的误解。


阅读 379

收藏
2020-07-04

共1个答案

一尘不染

您可以通过resolve在routingProvider中使用来实现。

这使您可以在启动控制器之前等待一些承诺得到解决。

从文档引用:

resolve-{Object。=}-可选的依赖关系映射,应将其注入到控制器中。如果这些依赖关系中的任何一个是应许的,路由器将在实例化控制器之前等待所有这些依赖关系被解决或被拒绝。如果所有的承诺都已成功解决,则将注入已解决的承诺的值,并触发$
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包含承诺数据注入到您的控制器中。

避免额外的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的
那个家伙那里学到了大部分东西 ****

2020-07-04