vue无感刷新Token并重新请求

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 = [];

/// 处理 Token 过期
const handleExpiredToken = async (originalRequest) => {
  if (isRefreshing) {
    // 如果正在刷新 Token，将请求推入队列等待
    return new Promise((resolve, reject) => {
      pendingRequests.push({ originalRequest, resolve, reject });
    });
  }
  isRefreshing = true; // 标记为正在刷新
  // 请求新的 token
  try {
    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 = [];
};