我有一个角度应用程序，有时会为每个状态执行多个$ http.get请求。该应用程序使用JWT进行用户身份验证和刷新令牌。 API服务器会在因auth错误而失败的每个请求上发送401。
我已经发出了一个http interceptor请求带有401错误的刷新令牌的新令牌，之后重新发送原始请求。
问题是，如果一个州例如2 $ http.get请求并且都得到401响应，那么我更新访问令牌两次。显然我只想刷新令牌一次，但我还是想重新发送两个失败的请求。
这是可以实现的吗？如果可以的话？
app.factory('AuthInterceptor', function($q, $injector, RESOURCE_URL, API_BASE, authService) {
return {
request: function(config) {
config.headers = config.headers || {};
if (authService.getAccessToken()) {
if (config.url.substring(0, RESOURCE_URL.length) !== RESOURCE_URL) {
config.headers.Authorization = 'Bearer ' + authService.getAccessToken();
}
}
return config;
},
responseError: function(response) {
switch (response.status) {
case 401:
var deferred = $q.defer();
$injector.get("$http").post(API_BASE + '/api/auth/refresh', {refreshtoken: authService.getRefreshToken()}).then(function(r) {
if (r.data.data.accesstoken && r.data.data.refreshtoken && r.data.data.expiresin) {
authService.setAccessToken(r.data.data.accesstoken);
authService.setRefreshToken(r.data.data.refreshtoken);
authService.setExpiresIn(r.data.data.expiresin);
$injector.get("$http")(response.config).then(function(resp) {
deferred.resolve(resp);
},function(resp) {
deferred.reject();
});
} else {
deferred.reject();
}
}, function(response) {
deferred.reject();
authService.clear();
$injector.get("$state").go('guest.login');
return;
});
return deferred.promise;
break;
default:
authService.clear();
$injector.get("$state").go('guest.login');
break;
}
return response || $q.when(response);
}
};
});
答案 0 :(得分：44)
你的拦截器需要跟踪它是否有“飞行中”的身份验证请求。它可以通过保持对身份验证请求返回的promise的引用来完成此操作。如果在飞行中有请求并且您获得另一个401，则只需使用该缓存的承诺而不是发起新请求。此外，当'/ api / auth / refresh'本身返回401时，您应该考虑添加逻辑来解决这种情况。
app.factory('AuthInterceptor', function($q, $injector, RESOURCE_URL, API_BASE, authService) {
var inflightAuthRequest = null;
return {
request: function(config) {
config.headers = config.headers || {};
if (authService.getAccessToken()) {
if (config.url.substring(0, RESOURCE_URL.length) !== RESOURCE_URL) {
config.headers.Authorization = 'Bearer ' + authService.getAccessToken();
}
}
return config;
},
responseError: function(response) {
switch (response.status) {
case 401:
var deferred = $q.defer();
if(!inflightAuthRequest) {
inflightAuthRequest = $injector.get("$http").post(API_BASE + '/api/auth/refresh', {refreshtoken: authService.getRefreshToken()});
}
inflightAuthRequest.then(function(r) {
inflightAuthRequest = null;
if (r.data.data.accesstoken && r.data.data.refreshtoken && r.data.data.expiresin) {
authService.setAccessToken(r.data.data.accesstoken);
authService.setRefreshToken(r.data.data.refreshtoken);
authService.setExpiresIn(r.data.data.expiresin);
$injector.get("$http")(response.config).then(function(resp) {
deferred.resolve(resp);
},function(resp) {
deferred.reject();
});
} else {
deferred.reject();
}
}, function(response) {
inflightAuthRequest = null;
deferred.reject();
authService.clear();
$injector.get("$state").go('guest.login');
return;
});
return deferred.promise;
break;
default:
authService.clear();
$injector.get("$state").go('guest.login');
break;
}
return response || $q.when(response);
}
};
});
答案 1 :(得分：3)
Joe Enzminger的解决方案很棒。但是我对回调有一些问题，因为它没有执行。 然后我注意到了inflightAuthRequest / inFlightAuthRequest中的一个小错误。
我的完整解决方案现在是：
(function() {
'use strict';
angular.module('app.lib.auth', []);
angular.module('app.lib.auth')
.factory('authService', authService);
angular.module('app.lib.auth')
.factory('AuthInterceptor', AuthInterceptor);
function authService($window) {
return {
getToken: function() {
return $window.localStorage.getItem('JWT');
},
getRefreshToken: function() {
return $window.localStorage.getItem('Refresh-JWT');
},
setRefreshToken: function(token) {
$window.localStorage.setItem('Refresh-JWT', token);
},
setToken: function(token) {
$window.localStorage.setItem('JWT', token);
},
clearAllToken: function(){
$window.localStorage.removeItem('JWT');
$window.localStorage.removeItem('Refresh-JWT');
},
clearToken: function(){
$window.localStorage.removeItem('JWT');
},
isLoggedIn: function() {
if ($window.localStorage.getItem('JWT') === null) {
return false;
}
else {
return true;
}
},
toLogin: function(){
$window.location.href = "http://" + $window.location.host + "/tprt/login";
}
}
}
function AuthInterceptor($q, $injector, authService) {
var inFlightAuthRequest = null;
return {
request : function(config) {
config.headers = config.headers || {};
if(authService.getToken()){
config.headers['Authorization'] = authService.getToken();
}
return config;
},
responseError : function(response) {
if(response.config.url == URLS.api_refresh_token){
console.log(JSON.stringify(response));
authService.clearAllToken();
authService.toLogin();
}else{
switch (response.status) {
case 401:
authService.clearToken();
var deferred = $q.defer();
if (!inFlightAuthRequest) {
inFlightAuthRequest = $injector.get("$http").post(
URLS.api_refresh_token, {
refreshtoken : authService.getRefreshToken()
});
}
inFlightAuthRequest.then(function(r) {
inFlightAuthRequest = null;
console.log(JSON.stringify(r));
authService.setToken(r.data.accesstoken);
$injector.get("$http")(response.config).then(function(resp) {
deferred.resolve(resp);
}, function(resp) {
deferred.reject(resp);
});
}, function(error) {
inFlightAuthRequest = null;
deferred.reject();
authService.clearAllToken();
authService.toLogin();
return;
});
return deferred.promise;
break;
default:
return $q.reject(response);
break;
}
return response || $q.when(response);
}
}
}
}
})();