React应用authAxios上下文鉴权异常求助：登录后请求返回401，刷新页面后恢复

你遇到的这个401问题很典型——App组件初始化时创建的authAxios实例，它的Authorization header是固定死的，用的是初始化那一刻sessionStorage里的token值。

登录前sessionStorage.getItem('token')大概率是null或者空字符串，所以你的authAxios实例从一开始就带着无效的授权头。登录成功后你把token存进了sessionStorage，但已经创建好的实例不会自动更新它的header配置，后续用它发请求时依然带着旧的无效值，服务器自然返回401。而刷新页面时，App组件重新初始化，这时候能拿到刚存的有效token，所以新创建的authAxios实例头是对的，请求就正常了。

最优雅的解决方式是不要在创建实例时固定Authorization header，而是用Axios的请求拦截器，每次发起请求前动态获取最新的token。这样不管你是刚登录成功，还是token后续有更新，请求都会自动带上最新的有效授权头，不需要刷新页面。

代码修改如下：

// 先创建不带固定授权头的基础实例
const authAxios = axios.create({ baseURL: 'http://127.0.0.1:8000' });

// 添加请求拦截器，每次请求前动态注入最新的token
authAxios.interceptors.request.use(
  (config) => {
    // 每次请求都从sessionStorage拿最新的token
    const token = sessionStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

然后你的上下文Provider依然用这个authAxios实例即可，不需要做其他修改：

<authtoken.Provider value={authAxios}>
  <Router>
    <Routes>
      <Route path='/' element={<Login />} />
      <Route path='/Home' element={<Home />} />
    </Routes>
  </Router>
</authtoken.Provider>

如果你不想用拦截器，也可以通过React状态来管理authAxios实例，登录成功后触发状态更新，重新创建带有新token的实例。

1. 在App组件中添加状态管理 #

import { useState } from 'react';

function App() {
  // 初始化时创建实例，用当前sessionStorage的token
  const [authAxiosInstance, setAuthAxiosInstance] = useState(() => 
    axios.create({ 
      baseURL: 'http://127.0.0.1:8000', 
      headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } 
    })
  );

  // 定义更新实例的方法
  const refreshAuthAxios = () => {
    const newInstance = axios.create({
      baseURL: 'http://127.0.0.1:8000',
      headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` }
    });
    setAuthAxiosInstance(newInstance);
  };

  return (
    <authtoken.Provider value={authAxiosInstance}>
      <Router>
        <Routes>
          {/* 把更新方法传给Login组件 */}
          <Route path='/' element={<Login onLoginSuccess={refreshAuthAxios} />} />
          <Route path='/Home' element={<Home />} />
        </Routes>
      </Router>
    </authtoken.Provider>
  );
}

2. 在Login组件中调用更新方法 #

import { useNavigate } from 'react-router-dom';

const Login = ({ onLoginSuccess }) => {
  const navigate = useNavigate();

  const handleLogin = async (formData) => {
    try {
      // 发起登录请求
      const response = await axios.post('http://127.0.0.1:8000/login', formData);
      // 存储token到sessionStorage
      sessionStorage.setItem('token', response.data.token);
      // 更新authAxios实例
      onLoginSuccess();
      // 跳转到首页
      navigate('/Home');
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  // 登录表单渲染逻辑...
  return (
    <div className="login-form">
      {/* 表单内容 */}
      <button onClick={() => handleLogin(/* 表单数据 */)}>登录</button>
    </div>
  );
};

• 请求拦截器方案：更简洁、更健壮，不需要在组件间传递回调，也不用管理实例的状态，所有请求都会自动处理token注入，推荐使用。
• 动态更新实例方案：需要额外的状态管理和组件通信，适合一些特殊场景（比如需要定制不同实例的配置），但代码复杂度更高。

可以再添加一个响应拦截器，处理token过期的情况——如果服务器返回401，就清除sessionStorage里的token，跳转到登录页：

authAxios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      sessionStorage.removeItem('token');
      window.location.href = '/';
    }
    return Promise.reject(error);
  }
);

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