React Context存储的登录数据每次刷新页面变为undefined该如何解决

问题根因 #

你已经实现了登录凭证存入localStorage的逻辑，刷新后被退回登录页的核心原因是App组件的authTokens状态初始值没有读取本地存储的内容，页面刷新后React状态重置为空，就会被判定为未登录，不需要做大规模重构，补充以下修改即可：

核心修改点 #

1. 初始化时读取localStorage的凭证

修改App.js中authTokens的state声明，使用函数式初始值读取本地存储的登录凭证，仅在组件首次渲染时执行一次，性能更优：

// App.js 原代码
const [authTokens, setAuthTokens] = useState();

// 修改为
const [authTokens, setAuthTokens] = useState(() => {
  const savedTokens = localStorage.getItem("tokens");
  return savedTokens ? JSON.parse(savedTokens) : undefined;
});

2. 补充登出逻辑（推荐）

在App组件中补充统一的登出方法，同步清空Context状态和本地存储，再将方法传入Context供全局调用：

// App.js 修改
function App() {
  const [authTokens, setAuthTokens] = useState(() => {
    const savedTokens = localStorage.getItem("tokens");
    return savedTokens ? JSON.parse(savedTokens) : undefined;
  });

  // 新增登出方法
  const logout = () => {
    localStorage.removeItem("tokens");
    setAuthTokens(undefined);
  };

  const setTokens = (data) => {
    localStorage.setItem("tokens", JSON.stringify(data));
    setAuthTokens(data);
  }

  return (
    <AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens, logout }}>
      {/* 原有路由逻辑保持不变 */}
      <Router>
        <div className="app">
          <ul>
            <li><Link to="/">Home Page</Link></li>
            <li><Link to="/admin">Admin Page</Link></li>
          </ul>
          <Route exact path="/login" component={Login} />
          <Route exact path="/signup" component={Signup} />
          <Route exact path="/" component={Home} />
          <PrivateRoute exact path="/admin" component={Admin} />
        </div>
      </Router>
    </AuthContext.Provider>
  );
}

3. 优化AuthContext默认值（可选）

给AuthContext补充默认值，避免未包裹Provider时调用useAuth出现 undefined 报错：

// Auth.js 修改
import { createContext, useContext } from "react";

export const AuthContext = createContext({
  authTokens: undefined,
  setAuthTokens: () => {},
  logout: () => {}
});

export function useAuth() {
  return useContext(AuthContext);
}

可选优化 #

如果你的token有过期时间，可以在App组件首次渲染时，调用后端接口校验本地存储的token是否有效，如果无效则直接清空本地存储跳转到登录页，避免持有过期token时被误判定为已登录。

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