AngularJs:在HTTP请求上添加事件监听器

4

由于我使用Oauth2来保护我的API,如果先前的访问令牌已过期,则需要在任何HTTP请求之前获取新的访问令牌。

直到现在,我很少使用事件监听器。

这是我目前所做的(请告诉我是否正确):

ApplicationController.js

app.controller('ApplicationController', function($rootScope, $scope, $localStorage, AuthService){

    // Listening event apiRequested
    $scope.$on('event:apiRequested', function(e) {

        AuthService.token();
        // Restore the access_token in case it has changed
        access_token = $localStorage.getObject('access_token');

    });

})

UserController.js :

$rootScope.$broadcast('event:apiRequested');

// Get Users around
return $http.post(domain+'/api/users?access_token='+access_token.key, data).then(function(response){
    return response;
});

首先,我不确定的是...如果事件已经完全执行,$http是否会被处理?

所以,既然我不确定,我考虑添加一个回调函数。

下面是我的想法:

$rootScope.$broadcast('event:apiRequested', function(response){

    if(response){

        // Get Users around
        return $http.post(domain+'/api/users?access_token='+access_token.key, data).then(function(response){
            return response;
        });

    }

});

请问是否有可能这样做,或者我应该使用其他方法来处理这种情况,与事件监听器不同。

1个回答

4
为什么不使用已经完成的拦截HTTP请求的拦截器呢? 在您的情况下,您应该将这种非常特定的行为添加到“请求”部分中。
请参见以下拦截器示例:
var $myService; // Add a constant that store the service
    $httpProvider.interceptors.push(['$location', '$injector', '$q', function($location, $injector, $q) {
                             return {

                               'request' : function(config){
                                 console.log("intercept request", config.url,config)
                                 // Your token shall be retreive in this part
                                 return config
                               },
                               'response' : function(config){
                                 $myService= $myService|| $injector.get('$myService'); // inject the service manually if constant is undefined
                                 console.log("intercept response", config)
                                 // Your token shall be retreive in this part
                                 return config
                               },
                                 'responseError': function(rejection) {

                                     console.log("responseError intercepted" , rejection);
                                      if (rejection.status === 403) {

                                         return $q.reject(rejection);

                                     } else if (rejection.status === 423) {



                                         return $q.reject(rejection);
                                     }else
                                          return $q.reject(rejection);
                                 }
                             };
                         }]);

拦截器应该定义在.config(["$httpProvider", function($httpProvider)中。

1
当然,我添加了一个补充来定义您应该定义拦截器的位置。 - aorfevre
1
我更新了我的代码以说明如何添加一个服务。 - aorfevre
谢谢,它确实找到了服务。由于该服务还使用$http请求从服务器获取令牌,我存在循环依赖。我想知道将我的HTTP请求包装成单个服务、因素或提供程序,并将其用于所有请求是否不是更好的解决方案(如此处建议的https://dev59.com/4GIj5IYBdhLWcg3wGBbj)。 - Brieuc
或者我只需要检查config.url,这样就可以了。如果(!config.url.includes('/oauth/v2/token') && config.url.includes('/api')){ // 调用服务 } 这个方法似乎可行。请告诉我你的想法。谢谢! - Brieuc
1
不能告诉你 ;) 不知道... 你得试试 héhé - aorfevre
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接