在javascript中阻止http调用的最佳方法是什么?
我正在使用JWT进行身份验证。一旦令牌过期,我就使用fetch(而不是像其他调用那样使用Axios)来获取新的访问令牌。这将导致对新访问令牌的多次调用。有没有办法只允许一个http请求使用过期的令牌并阻止其他请求,然后在新的访问令牌到达后重试 基本上 当前情景: 使用过期的访问令牌调用1->新建访问令牌A1 使用过期的访问令牌调用2->新建访问令牌A2 使用过期的访问令牌调用3->新建访问令牌A3 3个新的访问令牌到达 我想要的是: 使用过期的访问令牌调用1->新建访问令牌A1 使用过期访问令牌调用2->阻塞--(新访问令牌到达)->使用新访问令牌重试 使用过期访问令牌调用3->被阻止--(新访问令牌到达)->使用新访问令牌重试 代码如下:在javascript中阻止http调用的最佳方法是什么?,javascript,http,jwt,fetch,jwt-auth,Javascript,Http,Jwt,Fetch,Jwt Auth,我正在使用JWT进行身份验证。一旦令牌过期,我就使用fetch(而不是像其他调用那样使用Axios)来获取新的访问令牌。这将导致对新访问令牌的多次调用。有没有办法只允许一个http请求使用过期的令牌并阻止其他请求,然后在新的访问令牌到达后重试 基本上 当前情景: 使用过期的访问令牌调用1->新建访问令牌A1 使用过期的访问令牌调用2->新建访问令牌A2 使用过期的访问令牌调用3->新建访问令牌A3 3个新的访问令牌到达 我想要的是: 使用过期的访问令牌调用1->新建访问令牌A1 使用过期访问令牌
instance.interceptors.response.use(response => {
// console.log(response);
// Edit response config
return response;
}, error => {
// console.log(error);
// return Promise.reject(error);
const refreshToken = localStorage.getItem('refreshToken');
if(refreshToken !== null && refreshToken !== undefined){
const refreshTokenCheck = jwt_decode(refreshToken);
}
if(refreshToken && refreshToken !== null && refreshToken !== undefined && !refreshToken.message){
return new Promise((resolve) => {
const originalRequest = error.config;
if(error.response && error.response.status === 401 && refreshToken !== null){
// originalRequest._retry = true;
const response = fetch(REACT_APP_AXIOS_BASEURL.concat('/').concat(REACT_APP_AXIOS_API_V1).concat('token/refresh/'), {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
refresh: refreshToken
}),
})
.then((res) => res.json())
.then((res) => {
console.log(res)
localStorage.removeItem('accessToken');
localStorage.removeItem('accessTokenDecoded');
localStorage.setItem('accessToken', res.access);
localStorage.setItem('accessTokenDecoded', JSON.stringify(jwt_decode(res.access)));
})
.then((res) => {
const token = localStorage.getItem('accessToken');
originalRequest.headers['Authorization'] = `Bearer ${token}`;
// console.log(originalRequest)
return axios(originalRequest);
})
resolve(response)
}
return Promise.reject(error)
})
}
return Promise.reject(error);
});
任何帮助都将不胜感激。另外,如果在vanilla js中有一种方法可以做到这一点,那将比使用库更好
蒂亚