Axios 刷新令牌无限循环-多个请求
我查看了有关此问题的其他问题,但无法修复它。我对刷新和访问令牌更新方法有 获取请求 限制,并且一个页面中会有 多个请求 。此外,我在我们的系统中有 不同的访问令牌/刷新令牌用法 。
更新: 通过在主实例中创建 axios 实例来处理无限循环问题。现在,我经常遇到 请求取消 问题并且无法解决它。请求后,发出访问令牌请求但被取消。我不知道为什么。
您可以在下面看到序列图:
到目前为止,有时它工作得很粗略,请求 -> 401 访问令牌过期错误 -> 在拦截器中更新访问令牌并将其写入 localStorage ->同一请求解析 200
但大多数情况下都会发生这种情况,并且访问令牌会继续出现 401 循环:
注意:在访问令牌循环的开始处,我得到 401,包括“未找到工作人员”错误描述,这意味着在我们的系统中,更新的令牌不包含在传入的非令牌请求中(过期的令牌包含在标头中)。一般情况下,非 token 请求的 401 错误的错误描述为“Token expired”。
可能的菜鸟问题:一个请求怎么可能只有一次预检和两个 xhr?
这是我的 service.js 代码:
const sendRequest = async (options) => {
let requestOptions = {
... // includes the method, data etc.
if (options.hasOwnProperty("token")) {
requestOptions.headers =
Object.assign(requestOptions.headers, {
Authorization: RequestOptionConstants.AUTHORIZATION +
options.token,
});
}
return await axios(
options.url, // includes the api url
requestOptions,
axios.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
const originalConfig = error.config;
if (error.response.status === 401 && !originalConfig._retry) {
originalConfig._retry = true;
let refreshToken = JSON.parse(localStorage.getItem("user"))
.refreshToken;
// Check for refresh token expiration
if (jwtDecode(refreshToken).exp < new Date().getTime()) {
logout();
}.
await axios
.get(ApiConstants.GET_ACCESS_TOKEN, {
headers: {
Authorization:
"Bearer " +
JSON.parse(localStorage.getItem("user")).refreshToken,
},
})
.then((res) => {
if (res.status === 200) {
const user = JSON.parse(localStorage.getItem("user"));
originalConfig.headers["Authorization"] =
"Bearer " + res.data.accessToken;
user.accessToken = res.data.accessToken;
localStorage.setItem("user", JSON.stringify(user));
if (res.data.isRefreshTokenInRenewalPeriod) {
getRefreshToken(originalConfig);
}
return axios(originalConfig);
}
});
}
return Promise.reject(error);
}
))
.then(handleResponse, (error) => Promise.reject(error))
.then((data) => {
return data;
});
};
const handleResponse = (response) => {
const data = response.data;
if (!data?.result?.success ?? false) {
const error = data.result;
return Promise.reject(error);
}
return data;
};
function logout() {
localStorage.removeItem("user");
window.location.reload();
}
const getRefreshToken = () => {
axios
.get(ApiConstants.GET_REFRESH_TOKEN, {
headers: {
Authorization:
"Bearer " + JSON.parse(localStorage.getItem("user")).refreshToken,
},
})
.then((res) => {
if (res.status === 200) {
const user = JSON.parse(localStorage.getItem("user"));
user.refreshToken = res.data.refreshToken;
localStorage.setItem("user", JSON.stringify(user));
return axios();
}
})
.catch((error) => {
console.log(error);
});
};
其实我尝试了 队列方法 中的“返回新的 Promise”方法。
队列方法解决了无限循环的问题,但这次更新刷新 token 时仍然遇到 401 错误,错误描述为“未找到工作人员”。如何解决 async await 方法的无限循环问题?
已解决: 我通过为 accessToken 和 refreshToken 定义另外两个 axios 实例并按顺序调用它们解决了此问题。由于机密性,图像已被删除。
您尝试过 axios.interceptors.response.eject() 吗?它将有助于在 API 调用时禁用拦截器,并在调用后重新启用它。示例:
if (error.response.status === 401 && !originalConfig._retry) {
originalConfig._retry = true;
**// Add axios interceptors eject to avoid loop
axios.interceptors.response.eject();**
let refreshToken = JSON.parse(localStorage.getItem("user"))
.refreshToken;
// Check for refresh token expiration
if (jwtDecode(refreshToken).exp < new Date().getTime()) {
logout();
}
....