React 应用中刷新页面后认证状态丢失的解决方案

// AuthContext.js
import { createContext, useState, useEffect } from "react";

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState({});
  const [loading, setLoading] = useState(true); // 初始为 true，表示正在加载

  useEffect(() => {
    // 尝试从 localStorage 读取认证信息
    const storedToken = localStorage.getItem("accessToken");
    const storedRoles = localStorage.getItem("roles");
    const storedId = localStorage.getItem("userId");

    if (storedToken && storedRoles && storedId) { // 确保所有关键信息都存在
      try {
        const token = JSON.parse(storedToken);
        const roles = JSON.parse(storedRoles);
        const id = JSON.parse(storedId);
        // 如果成功解析，则更新 auth 状态
        setAuth({ token, roles, id });
      } catch (e) {
        // 解析失败，可能是数据损坏，清空 localStorage
        console.error("Failed to parse stored auth data:", e);
        localStorage.removeItem("accessToken");
        localStorage.removeItem("roles");
        localStorage.removeItem("userId");
      }
    }
    setLoading(false); // 数据加载尝试完成后，设置 loading 为 false
  }, []); // 仅在组件挂载时运行一次

  // 假设还有一个 logout 函数，用于清除认证状态和 localStorage
  const logout = () => {
    setAuth({});
    localStorage.removeItem("accessToken");
    localStorage.removeItem("roles");
    localStorage.removeItem("userId");
  };

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

export default AuthContext;

// ExercisePage.js
import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import styles from "./ExercisePage.module.css";
import api from "../../apis/requestService";
import useAuth from "../../hooks/useAuth"; // 假设 useAuth 钩子返回 auth, setAuth, loading

function Exercises() {
  const { auth, loading } = useAuth(); // 获取 auth 和 loading 状态
  const { id } = useParams();
  const navigate = useNavigate();
  const [requests, setRequests] = useState([]);
  const [exerciseData, setExerciseData] = useState({
    weight: "",
    reps: "",
    exerciseId: id,
    date: null,
  });
  const [err, setErr] = useState("");
  const [popupStyle, showPopup] = useState("hide");

  const { weight, reps } = exerciseData;

  useEffect(() => {
    setExerciseData((prevData) => ({
      ...prevData,
      exerciseId: id,
      date: new Date(),
    }));

    // 只有当 loading 为 false 且 auth.id 存在时才发起请求
    if (!loading && auth.id) {
      api.getUserExercises(id).then((response) => {
        setRequests(response.data);
      }).catch(error => {
        console.error("Error fetching user exercises:", error);
        setErr("无法加载训练记录。");
      });
    }
  }, [id, auth.id, loading]); // 依赖中加入 loading

  const onInputChange = (e) => {
    setExerciseData({ ...exerciseData, [e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();

    // 在提交前再次检查 auth.id 是否可用
    if (loading || !auth.id) {
      setErr("认证信息尚未加载或无效，请稍候再试或重新登录。");
      popup();
      return;
    }

    console.log("User id: " + auth.id);
    const updatedExerciseData = {
      ...exerciseData,
      userId: auth.id,
      date: new Date(),
    };

    api
      .createRequest(updatedExerciseData)
      .then((response) => {
        if (response.data.id) {
          // 创建成功后，重新获取用户训练记录
          return api.getUserExercises(auth.id);
        } else {
          throw new Error("创建请求时发生错误。");
        }
      })
      .then((response) => {
        setRequests(response.data);
        setExerciseData({ ...updatedExerciseData, weight: "", reps: "" }); // 清空输入
        setErr(""); // 清除错误信息
        popup(); // 显示成功提示
      })
      .catch((error) => {
        console.error(error);
        setErr("创建请求时发生错误：" + (error.response?.data?.message || error.message));
        popup();
      });
  };

  const popup = () => {
    showPopup("exercise-popup");
    setTimeout(() => showPopup("hide"), 3000);
  };

  // 如果正在加载认证信息，可以显示加载状态或不渲染依赖 auth 的部分
  if (loading) {
    return <div className={styles.wrapper}>加载认证信息...</div>;
  }

  // 如果 auth.id 不存在（例如未登录），可以重定向或显示提示
  if (!auth.id) {
    return <div className={styles.wrapper}>请登录以查看和设置训练。</div>;
    // 或者 navigate('/login');
  }

  return (
    <div className={styles.wrapper}>
      {/* ... 现有渲染逻辑 ... */}
      <div className={styles.content}>
        {requests.length > 0 ? (
          requests.map((request, index) => (
            <div key={index} className={styles.requestBox}>
              <div className={styles.requestDetails}>
                <h2>{request.exercise.name}</h2>
                <p>{request.exercise.description}</p>
              </div>
              <img
                src={request.exercise.imageUrl}
                alt={request.exercise.name}
              />
              <div className={styles.requestInfo}>
                <p>Weight: {request.weight} kg</p>
                <p>Reps: {request.reps}</p>
                <p>Date: {new Date(request.date).toLocaleDateString()}</p>
              </div>
            </div>
          ))
        ) : (
          <p>暂无训练记录。</p>
        )}
      </div>
      <form onSubmit={(e) => onSubmit(e)} className={styles.exerciseForm}>
        <h1 className={styles.h1Text}>
          设置 <br /> 训练
        </h1>
        <div className={styles.inputContainer}>
          <label htmlFor="weight" className={styles.inputLabel}>
            输入重量
          </label>
          <input
            id="weight"
            name="weight"
            type="number"
            value={weight}
            min="0"
            onChange={onInputChange}
            className={styles.inputBox}
          />
        </div>
        <div className={styles.inputContainer}>
          <label htmlFor="reps" className={styles.inputLabel}>
            输入次数
          </label>
          <input
            id="reps"
            name="reps"
            type="number"
            value={reps}
            min="0"
            onChange={onInputChange}
            className={styles.inputBox}
          />
        </div>
        <button className={styles.exerciseBtn} type="submit">
          +
        </button>
        <div className={popupStyle}>
          <h3>{err}</h3>
        </div>
      </form>
    </div>
  );
}

export default Exercises;