Vue中Axios拦截器实现：有token时先获取API设置再执行请求

我帮你梳理下需求的核心：当用户存在token时，所有初始请求都要暂停，先去API拉取配置信息，拿到配置后再继续原来的请求；如果没有token，就直接重置用户状态并放行请求。下面是完善后的代码和关键细节说明：

完整代码实现 #

import axios from 'axios'
import store from './store'

// 创建axios实例
const instance = axios.create({ 
  baseURL: window.location.origin + '/api', 
  timeout: 10000, 
  params: {} 
});

// 单独封装获取配置的方法（避免和拦截器循环调用，这里用原始axios发起请求）
const fetchAppConfig = async (token) => {
  try {
    const configResponse = await axios.get(`${window.location.origin}/api/config`, {
      headers: {
        Authorization: `Bearer ${token}`
      },
      timeout: 10000
    });
    // 将配置存入store，记得在store里定义对应的action和state
    await store.dispatch('saveAppConfig', configResponse.data);
    // 标记配置已获取，防止后续请求重复拉取
    store.commit('setConfigFetched', true);
  } catch (err) {
    console.error('配置获取失败:', err);
    // 失败后清除token并重置用户状态，避免无效请求
    localStorage.removeItem('token');
    sessionStorage.removeItem('token');
    await store.dispatch('setUserToDefault');
    // 抛出错误，让原请求终止
    throw err;
  }
};

// 请求拦截器
instance.interceptors.request.use(async (config) => {
  const token = localStorage.getItem('token') || sessionStorage.getItem('token');

  if (token) {
    // 核心判断：如果还没获取过配置，先暂停当前请求去拉配置
    if (!store.state.configFetched) {
      await fetchAppConfig(token);
    }
    // 给请求加上Authorization头
    config.headers.Authorization = `Bearer ${token}`;
  } else {
    // 无token时直接重置用户状态
    await store.dispatch('setUserToDefault');
  }

  return config;
}, (error) => {
  // 处理请求拦截阶段的错误
  return Promise.reject(error);
});

export default instance;

关键细节说明 #

• 避免循环请求：获取配置的请求用原始axios而不是我们创建的instance，不然会触发自己的拦截器，陷入无限循环。
• 配置状态标记：在store里加一个configFetched状态（默认false），确保只有第一次请求会触发配置拉取，后续请求直接放行。你需要在store里补充对应的mutation（setConfigFetched）和action（saveAppConfig）来管理这些状态。
• 错误处理：如果配置获取失败，直接清除token并重置用户，避免后续带着无效token发起请求，同时抛出错误让原请求也终止，符合业务逻辑。
• 异步处理：拦截器用async/await处理配置请求的异步逻辑，确保配置拿到后再继续原请求。

额外注意事项 #

• 如果你的配置需要定期更新，可以在后续加个定时刷新的逻辑，但初始阶段只需要一次拉取。
• 确保/api/config接口是公开允许带token访问的，不会被其他拦截逻辑拦截。

内容的提问来源于stack exchange，提问作者firs058