vue无感刷新Token并重新请求

vue 拦截器拦截401重新请求Token 无感刷新Token 之后重新请求报401的接口

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 = [];/// 处理 Token 过期
const handleExpiredToken = async (originalRequest) => {if (isRefreshing) {// 如果正在刷新 Token，将请求推入队列等待return new Promise((resolve, reject) => {pendingRequests.push({ originalRequest, resolve, reject });});}isRefreshing = true; // 标记为正在刷新// 请求新的 tokentry {const params = {refreshToken: localStorage.getItem('refreshToken'),grantType: 'refreshToken'};// 刷新Token接口const response = await login(params);const { accessToken, refreshToken } = response.data;localStorage.setItem('token', accessToken);localStorage.setItem('refreshToken', refreshToken);// 处理通过原请求重试其他待处理请求processPendingRequests(accessToken);// 更新原请求的 Authorization 头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 = [];
};