vue 拦截器拦截401重新请求Token 无感刷新Token 之后重新请求报401的接口
javascript">instance.interceptors.response.use(async (response) => {let { data } = response;if (data.code === 401 || data.code === 403) {return await handleExpiredToken(response.config);}if (data.code !== 200) {return Promise.reject(data);} else {return Promise.resolve(data);}},async (error) => {if (!error || !error.response) {handleNetworkError();return Promise.reject('Network anomaly');}switch (error.response.status) {case 401:case 403:return await handleExpiredToken(error.config);case 500:handleServerError(error.response.data.code);break;case 502:Message.error('Server error');break;default:break;}return Promise.reject(error.response.data.message);}
);let isRefreshing = false;
let pendingRequests = [];
const handleExpiredToken = async (originalRequest) => {if (isRefreshing) {return new Promise((resolve, reject) => {pendingRequests.push({ originalRequest, resolve, reject });});}isRefreshing = true; try {const params = {refreshToken: localStorage.getItem('refreshToken'),grantType: 'refreshToken'};const response = await login(params);const { accessToken, refreshToken } = response.data;localStorage.setItem('token', accessToken);localStorage.setItem('refreshToken', refreshToken);processPendingRequests(accessToken);originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;return await instance(originalRequest);} catch (error) {console.log('error--------', error);localStorage.clear();router.push('/login');processPendingRequests(null);} finally {isRefreshing = false; }
}
const processPendingRequests = (accessToken) => {pendingRequests.forEach(({ originalRequest, resolve, reject }) => {if (accessToken) {originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;resolve(instance(originalRequest));} else {reject('Token refresh failed');}});pendingRequests = [];
};