登录后AuthContext.Provider无法设置用户数据的原因排查

问题根源 #

核心问题在于React的useState状态仅存于内存中，页面刷新后所有组件会重新挂载，Context里的auth会被重置为初始空对象。你登录后调用window.location.reload()强制刷新页面，直接清空了内存中的状态——哪怕之前用setAuth设置了数据，刷新后也会丢失。而token能保留，是因为useToken应该是把token存在了localStorage/sessionStorage这类持久化存储里。

解决步骤 #

1. 给Auth状态添加持久化 #

修改AuthProvider，让它初始化时从本地存储读取用户数据，更新状态时同步写入本地存储：

// context/AuthProvider.tsx
const AuthContext = createContext<any>({});

export const AuthProvider = ({ children }: any) => {
  // 初始化时优先从localStorage读取用户数据，无数据则用空对象
  const [auth, setAuth] = useState(() => {
    const savedAuth = localStorage.getItem('userAuth');
    return savedAuth ? JSON.parse(savedAuth) : {};
  });

  // 封装带持久化逻辑的setAuth方法
  const setPersistedAuth = (userData: any) => {
    setAuth(userData);
    localStorage.setItem('userAuth', JSON.stringify(userData));
  };

  return (
    <AuthContext.Provider value={{ auth, setAuth: setPersistedAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

2. 替换强制刷新为React路由跳转 #

登录成功后无需刷新页面，用React Router的useNavigate直接跳转到首页，既保留内存状态，又通过持久化存储保证刷新后数据不丢失：

// Login组件
import { useNavigate } from 'react-router-dom';

const Login: FC<any> = () => {
  const { setToken } = useToken();
  const { setAuth } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (event: any) => {
    event.preventDefault();

    const res = await API.login({
      login,
      password
    });

    const { access_token, user } = res;

    setToken(access_token);
    setAuth(user);

    // 用路由跳转替代页面刷新
    navigate('/');
  };

  return (
    <form onSubmit={handleSubmit}> {/* 注意：表单提交应该用onSubmit而非onClick */}
      // ...表单内容省略
    </form>
  );
};

3. 可选：退出登录时清理存储 #

如果有退出登录功能，记得同步清除localStorage中的用户数据：

const handleLogout = () => {
  setToken('');
  setAuth({});
  localStorage.removeItem('userAuth');
  navigate('/');
};

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