Как использовать перехватчик angularJS только для перехвата конкретных HTTP-запросов?
Я знаю, как перехватывать ВСЕ запросы, но я хочу только перехватывать запросы из своих ресурсов.
Кто-нибудь знает, как это сделать?
services.config(['$httpProvider',function($httpProvider) {
$httpProvider.interceptors.push('myHttpInterceptor');
}]);
services.factory("userPurchased", function ($resource) {
return $resource("/api/user/purchases/:action/:item",
{},
{
'list': {method: 'GET', params: {action: 'list'}, isArray: false},
'save': {method: 'PUT', params: {item: '@item'}},
'remove': {method: 'DELETE', params: {item: '@item'}},
}
);
});
services.factory('myHttpInterceptor', function($q,$rootScope) {
// $rootScope.showSpinner = false;
return {
response: function(response) {
$rootScope.showSpinner = false;
// do something on success
console.log('success');
console.log('status', response.status);
//return response;
return response || $q.when(response);
},
responseError: function(response) {
// do something on error
$rootScope.showSpinner = true;
console.log('failure');
console.log('status', response.status)
//return response;
return $q.reject(response);
}
};
});
Ответы
Ответ 1
Если вы хотите перехватывать только запросы из определенных ресурсов, вы можете использовать необязательное свойство interceptor
действия $request
. Angular документация см. здесь (Использование > действия)
JavaScript
angular.module('app', ['ngResource']).
factory('resourceInterceptor', function() {
return {
response: function(response) {
console.log('response intercepted: ', response);
}
}
}).
factory('resourceService', ['$resource', 'resourceInterceptor', function($resource, resourceInterceptor) {
return $resource(":name",
{},
{
'list': {method: 'GET', isArray: false, interceptor: resourceInterceptor}
}
);
}]).
run(['resourceService', '$http', function(resourceService, $http) {
resourceService.list({name: 'list.json'}); // <= intercepted
$http.get('list.json'); // <= not intercepted
}]);
Plunker: http://plnkr.co/edit/xjJH1rdJyB6vvpDACJOT?p=preview
Ответ 2
Единственный способ, которым я знаю это, просто отфильтровать запросы, которые вы хотите в обработчике ответов.
например.
...
response: function(response) {
if(response.config.url.startsWith('/api/')) {
//Do your custom processing here
}
return response;
}
...
Polyfill для string.startsWith()
//Taken from http://stackoverflow.com/questions/646628/javascript-startswith
if (typeof(String.prototype.startsWith) === 'undefined') {
String.prototype.startsWith = function(str) {
return this.slice(0, str.length) === str;
};
}
Ответ 3
/**object single interceptor**/
function SingleCallInterceptor(callbacks){
this.receive=function(response) {
switch (response.status) {
case 200:
callbacks.success(apiResponse);
break;
default :
callbacks.error(response);
}
}
}
var successfn=function(response){ //i have my response}
var errorfn=function(response){ //i have my error}
var responseInterceptor=new SingleCallInterceptor({success:successfn,error:errorfn});
$http({
url: "www.itsdirtysolutioniknow.it,
method: "GET",
dataType: "JSONP",
}).then(responseInterceptor.receive,responseInterceptor.receive);
Ответ 4
Мой предпочтительный способ - использовать HTTP-перехватчик, который заменяет заголовок "magic" Authorization с текущим токеном OAuth. Ниже приведен код OAuth, но исправление, которое является простым упражнением для читателя.
// Injects an HTTP interceptor that replaces a "Bearer" authorization header
// with the current Bearer token.
module.factory('oauthHttpInterceptor', function (OAuth) {
return {
request: function (config) {
if (config.headers.Authorization === 'Bearer') {
config.headers.Authorization = 'Bearer ' + btoa(OAuth.accessToken);
}
return config;
}
};
});
module.config(function ($httpProvider) {
$httpProvider.interceptors.push('oauthHttpInterceptor');
});
Ответ 5
По умолчанию angular отправляет и получает заголовки приложений /json. Вы можете получить это в заголовке ответа HTTP, например:
services.config(['$httpProvider',function($httpProvider) {
$httpProvider.interceptors.push('myHttpInterceptor');
}]);
services.factory("userPurchased", function ($resource) {
return $resource("/api/user/purchases/:action/:item",
{},
{
'list': {method: 'GET', params: {action: 'list'}, isArray: false},
'save': {method: 'PUT', params: {item: '@item'}},
'remove': {method: 'DELETE', params: {item: '@item'}},
}
);
});
services.factory('myHttpInterceptor', function($q,$rootScope) {
// $rootScope.showSpinner = false;
return {
response: function(response) {
// use this line to if you are receiving json, else use xml or any other type
var isJson = response.config.headers.Accept.indexOf('json')>-1;
$rootScope.showSpinner = false;
// do something on success
console.log('success');
console.log('status', response.status);
//return response;
return response || $q.when(response);
},
responseError: function(response) {
// use this line to if you are receiving json, else use xml or any other type
var isJson = response.config.headers.Accept.indexOf('json')>-1;
// do something on error
$rootScope.showSpinner = true;
console.log('failure');
console.log('status', response.status)
//return response;
return $q.reject(response);
}
};
});
Ответ 6
Я просто столкнулся с проблемой, когда googleapis также использует заголовок Authorization
и выбрасывает ответ 401, потому что JWT, который я использую на моем сервере, недействителен для своего сервера (очевидно), и мой код был установлен на автоматически удаляет токен и перенаправляет его на страницу входа. (Это было написано не очень хорошо, так как ANY 401 ответ выведет моего пользователя).
Я только что придумал это решение в моем методе request
в перехватчике, который, я думаю, работает очень хорошо:
.service('authInterceptor', ["$q", "$location", "tokenService", function($q, $location, tokenService){
this.request = function(config) {
// console.log($location.host());
var token = tokenService.getToken();
if(token && config.url.indexOf($location.host()) > -1) {
config.headers = config.headers || {};
config.headers.Authorization = "Bearer " + token
}
return config
}
this.responseError = function(response) {
// console.log(response.config.url)
if (response.status === 401) {
tokenService.removeToken();
$location.path('/login')
}
return $q.reject(response);
}
}])
Метод request
проверяет, есть ли у меня токен в локальном хранилище И если URL-адрес запроса делается на том же хосте (который я получаю от $location.host()
), как тот, на котором моя страница обслуживается. Это работает для локального хоста, а также любого URL-адреса, в который я заканчиваю развертывание моего сайта.
Я не проводил много испытаний с этим, так что, если кто-нибудь найдет недостаток в этом, пожалуйста, дайте мне знать:)
Ответ 7
Я знаю, что это старый вопрос, но я хотел предоставить решение, если вы нажали несколько перехватчиков $ http и хотите, чтобы они продолжали работать, верните свой ответ, чтобы цепочка перехватчиков продолжалась:
module.factory('resourceInterceptor', ['$q', function($q) {
return {
response: function(response) {
// do your conditional logic here
if (...) {
return $q.resolve(response);
}
},
responseError: function(response) {
// do your conditional logic here
if (...) {
return $q.reject(response);
}
}
};
}]);