我的axios拦截器是:-
axios.interceptors.response.use((response, error) => {
const originalRequest = response.config;
if (response.data.status === 'Token is Expired' && originalRequest.url === '/api/refresh') {
this.props.history.push('/logout');
Promise.reject(error);
}
if (response.data.status === 'Token is Expired' && !originalRequest._retry) {
originalRequest._retry = true;
const playerToken = localStorage.getItem('accessToken');
return axios
.get('/api/refresh', {
headers: {
Authorization: `bearer ${playerToken}`,
},
})
.then(res => {
console.log('from refreshtoken', res);
const stringRes = JSON.stringify(res);
const parsedRes = JSON.parse(stringRes);
const stringData = JSON.stringify(parsedRes.data);
const parsedData = JSON.parse(stringData);
const stringToken = JSON.stringify(parsedData.data);
const parsedToken = JSON.parse(stringToken);
if (parsedData.success == true) {
localStorage.setItem('accessToken', playerToken);
axios.response.config.headers['Authorization'] = `bearer ${parsedToken}`;
return Promise.resolve();
return axios(originalRequest);
} else {
this.props.history.push('/logout');
}
})
.catch(err => {
console.log('from refreshtoken', err);
});
}
return Promise.reject(error);
});
我的代码正在运行,但是当我第一次调用刷新令牌API时,由于我已退出应用程序,它还会返回相同的状态“令牌已过期”。这仅在拦截器中发生。当我在拦截器之外调用Refresh API时,它会返回一个刷新令牌。
我的代码有错误吗?或完全是其他编码错误。请回答并告诉我正确的方法以及在哪里放置拦截器?当前,它放置在一个组件中,该组件在登录后立即被调用。
通常流应该是这样的:
accessToken
发出常规请求token/refresh
发出请求。从该响应中获得一个新的访问令牌。所以代码应该看起来像这样(这是我应用程序中的工作示例):
function isUnAuthorizedError(error) {
return error.config && error.response && error.response.status === 401;
}
function shouldRetry(config) {
return config.retries.count < 3;
}
function updateAuthToken(response) {
localStorage.setItem('token', response.data.accessToken);
}
async function authInterceptor(error) {
error.config.retries = error.config.retries || {
count: 0,
};
if (isUnAuthorizedError(error) && shouldRetry(error.config)) {
const response = await axios.post(`/token/refresh`, {});
updateAuthToken(response);
error.config.retries.count += 1;
axios.defaults.headers.common.Authorization = `Bearer ${response.data.accessToken}`; // update the accessToken
return axios.rawRequest(error.config); // retries the original request
}
return Promise.reject(error);
}
axios.interceptors.response.use(null, authInterceptor); // This indicates that authInterceptor will work only on request errors (status code >= 400)
希望此流程更有意义。