无后端/logout接口，如何让React+Axios登出逻辑生效？

方案一：直接跳过Axios请求，执行清除逻辑 #

这是最直接的方式，不用折腾拦截器，直接修改你的登出函数，把原本依赖后端接口的请求替换成一个成功的Promise，让代码直接进入成功分支执行清除操作：

const handleLogout = async () => {
  try {
    // 替换原有的axios.post('/logout')，直接模拟成功响应
    await Promise.resolve();
    
    // 以下是你原本的清除逻辑，确保这些代码执行
    localStorage.removeItem('jwtToken');
    delete axios.defaults.headers.common['Authorization'];
    // 这里加上更新用户状态的代码，比如setUser(null)或者dispatch对应的action
  } catch (err) {
    // 错误分支可以保留，但现在不会走到这里了
    console.error(err);
  }
};

方案二：用Axios请求拦截器拦截/logout请求 #

如果你不想改动登出函数的结构，就在Axios实例初始化的地方添加请求拦截器，当检测到是/logout的POST请求时，直接返回成功响应，跳过真实的网络请求：

// 在你的Axios配置文件（比如axiosInstance.js）里添加
import axios from 'axios';

axios.interceptors.request.use(
  config => {
    // 匹配/logout的POST请求
    if (config.url === '/logout' && config.method === 'post') {
      // 直接返回一个模拟的成功响应对象，Axios会把这个当成请求成功的结果
      return Promise.resolve({
        data: {},
        status: 200,
        statusText: 'OK',
        headers: {},
        config: config
      });
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

为什么你之前的拦截器没生效？ #

大概率是用了响应拦截器，但后端没有/logout接口，真实请求发出去后会返回404错误，代码直接进入catch分支，根本没执行到清除逻辑。而用请求拦截器可以在发送请求前直接返回成功响应，让代码走到try里的清除步骤。

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