Typescript中GIS登录后动态Fetch URL及刷新保持登录问题求助

现状 #

• 已实现：Google Identity Services（GIS）登录、JWT解码获取user.email、静态API请求（如url/myemail）
• 未实现：登录成功后立即触发动态URL请求；页面刷新后保持登录状态

解决方案 #

1. 页面刷新后保持登录状态 #

组件挂载时从localStorage读取之前保存的用户信息，自动恢复登录状态，无需重新登录。

2. 登录成功后自动触发动态API请求 #

调整API请求的副作用依赖，当user.email更新时（登录成功后）自动执行请求，同时增加邮箱非空判断，避免初始状态下的无效请求。

修改后的完整代码 #

interface userI {
  name: string | null;
  iat?: number;
  iss?: string;
  picture?: string;
  email?: string;
}

interface bookingI {
  id: number;
  bureau: string;
  aile: string;
  office: string;
  office_id: string;
  cote: string;
  time: Date;
  etage: string;
  direction: string;
  espace: string;
}

const [user, setUser] = useState<userI>({ name: null });
const [booking, setBooking] = useState<bookingI>();
const apiUrl = "apiUrl";

function handleCallbackResponse(response: any) {
  console.log("Encoded JWT ID token: " + response.credential);
  const userObject = jwt_decode(response.credential);
  console.log(userObject);
  localStorage.setItem('user', JSON.stringify(userObject));
  setUser(userObject as userI);
  document.getElementById("signInDiv")!.hidden = true;
}

useEffect(() => {
  // 页面刷新时从localStorage恢复用户状态
  const savedUser = localStorage.getItem('user');
  if (savedUser) {
    setUser(JSON.parse(savedUser) as userI);
    document.getElementById("signInDiv")!.hidden = true;
  }

  // 初始化GIS登录按钮
  /* global google */
  //@ts-ignore
  google.accounts.id.initialize({
    client_id: "myId",
    callback: handleCallbackResponse
  });
  
  //@ts-ignore
  google.accounts.id.renderButton(
    document.getElementById("signInDiv"),
    { theme: "outline", size: "large", shape: "pill"}
  );
}, []);

useEffect(() => {
  // 仅当user.email存在时执行API请求
  if (!user.email) return;

  const fetchBooking = async () => {
    try {
      const data = await fetch(`${apiUrl}/${user.email}`, { method: "GET" });
      const jsonData = await data.json();
      console.log("jsonData : ", jsonData);
      setBooking(jsonData.data);
    } catch (error) {
      console.error("API请求失败:", error);
    }
  };

  fetchBooking();
}, [user.email]); // 依赖user.email，邮箱变化时自动触发请求

关键修改说明 #

• 刷新保持登录：在初始化的useEffect中添加localStorage读取逻辑，组件挂载时自动恢复用户信息并隐藏登录按钮。
• 自动触发API请求：将API请求的useEffect依赖改为user.email，当登录成功后user.email更新，副作用自动执行；同时增加if (!user.email) return判断，避免初始状态下的无效请求。
• 错误处理：给异步请求添加try/catch，便于排查API请求失败的问题。

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