React Native中Axios请求拦截器无法在重新登录后更新Authorization头Token的问题排查

你遇到的核心问题是Axios拦截器被重复注册了。因为你的拦截器注册代码直接写在App组件的顶层，组件每次渲染（包括token变化、注销登录后重新登录的场景）都会调用api.interceptors.request.use，添加一个新的请求拦截器。这些旧的拦截器会一直存在，并且它们捕获的是注册时的token闭包值——也就是说，即使后续Redux里的token更新了，旧拦截器还是用的之前的token值，甚至注销后旧拦截器里的token已经是空的，但还在执行，导致新登录的token无法正常覆盖。

另外，当token不存在时，你只是不设置头，但没有主动移除已有的Authorization头，这也可能导致旧的头残留。

1. 用useEffect管理拦截器的注册与销毁 #

把拦截器的注册放到useEffect里，依赖token，这样只有当token变化时才会重新注册拦截器，并且每次注册前移除旧的拦截器，避免叠加。

2. 注销时主动清除Axios的请求头 #

在注销逻辑里，除了清空Redux store，还要手动清除Axios实例的默认Authorization头，避免旧值残留。

3. 优化拦截器逻辑：token不存在时移除头 #

当token为空时，主动删除config.headers.common['Authorization']，而不是只跳过设置，确保请求头不会有残留的无效值。

下面是修改后的完整代码：

const App = () => { 
  const token = useSelector(selectToken); 
  const isLoggedOut = useSelector(selectIsLoggedOutState); 

  // 注销处理：清空store + 清除Axios默认头
  useEffect(() => { 
    if (isLoggedOut) { 
      Toast.show({ 
        type: 'success', 
        text1: logoutMessage, 
      }); 
      // 清除Axios的默认Authorization头
      delete api.defaults.headers.common['Authorization'];
      persistor.purge(); 
    } 
  }, [isLoggedOut]); 

  // 管理Axios请求拦截器
  useEffect(() => {
    // 定义拦截器函数
    const requestInterceptor = api.interceptors.request.use(
      config => {
        if (token) {
          config.headers.common['Authorization'] = `Bearer ${token}`;
        } else {
          // token不存在时，主动移除Authorization头
          delete config.headers.common['Authorization'];
        }
        return config;
      },
      err => Promise.reject(err)
    );

    // 组件卸载或token变化时，移除旧的拦截器
    return () => {
      api.interceptors.request.eject(requestInterceptor);
    };
  }, [token]); // 依赖token，token变化时重新注册拦截器

  // 其余代码
}

• 拦截器只在token变化时更新：通过useEffect的依赖token，每次token改变（包括从有到无、从无到有）都会先移除旧的拦截器，再注册新的，确保当前生效的拦截器总是使用最新的token值。
• 注销时主动清空头：避免旧的Authorization头留在Axios的默认配置里，导致后续请求还带着无效的头。
• 主动移除空token的头：确保当token不存在时，请求不会携带任何Authorization头，而不是可能残留旧值或者空值。

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