React 401返回后保留表单数据并跳转回表单页方案咨询

作为前端开发经常遇到这种场景，我给你整理几个实用的方案，你可以根据项目情况选择：

方案一：用SessionStorage临时存储表单数据（最常用） #

这个方案兼容性好，还能应对页面刷新的情况，步骤如下：

• 当拦截器捕获到401错误时，先把当前表单的完整数据序列化后存在sessionStorage里：

  // 假设你的表单数据存在formValues变量里
  sessionStorage.setItem('pendingFormData', JSON.stringify(formValues));
  

• 接着执行你现有的logout和跳转登录逻辑
• 登录成功后，先检查sessionStorage中是否存在pendingFormData：

  const pendingData = sessionStorage.getItem('pendingFormData');
  if (pendingData) {
    const formData = JSON.parse(pendingData);
    const fromPath = props.location.state?.from?.pathname || '/';
    // 跳转到原表单页，同时把数据带过去
    props.history.push({
      pathname: fromPath,
      state: { recoveredFormData: formData }
    });
    // 记得清空存储，避免下次登录重复使用旧数据
    sessionStorage.removeItem('pendingFormData');
  }
  

• 在原表单页的组件中，读取路由state里的recoveredFormData，用来初始化表单：

  useEffect(() => {
    const recoveredData = props.location.state?.recoveredFormData;
    if (recoveredData) {
      // 用恢复的数据设置表单状态
      setFormValues(recoveredData);
    }
  }, [props.location.state]);
  

方案二：通过路由State传递表单数据（轻量但不持久） #

如果你的场景不需要应对页面刷新，这个方案更简单直接：

• 拦截401跳转登录时，在路由state里额外带上表单数据：

  return (
    <Redirect 
      to={{ 
        pathname: "/", 
        state: { 
          from: props.location, 
          formData: formValues // 把表单数据直接存在state里
        } 
      }} 
    />
  );
  

• 登录页面获取这个state中的formData和from路径，登录成功后跳转时把数据一并带去：

  const { from, formData } = props.location.state || {};
  // 登录成功后跳转
  props.history.push({
    pathname: from?.pathname || '/',
    state: { recoveredFormData: formData }
  });
  

• 原表单页同样通过props.location.state读取数据并填充表单
• 注意：如果用户在登录页刷新，路由state里的数据会丢失，所以适合临时跳转的场景

方案三：用全局状态管理（适合复杂多表单场景） #

如果你的项目已经用了Redux、React Context这类全局状态管理工具，可以把待提交的表单数据存在全局状态里：

• 首先定义全局状态，比如在Context里：

  const AuthContext = createContext({
    pendingForm: null,
    setPendingForm: () => {}
  });
  

• 拦截401时，调用setPendingForm把当前表单的路径和数据存起来：

  setPendingForm({
    path: props.location.pathname,
    data: formValues
  });
  

• 登录成功后，从全局状态中取出pendingForm，跳转到对应路径并携带数据：

  const { pendingForm } = useContext(AuthContext);
  if (pendingForm) {
    props.history.push({
      pathname: pendingForm.path,
      state: { recoveredFormData: pendingForm.data }
    });
    // 清空全局状态，避免影响后续操作
    setPendingForm(null);
  }
  

• 原表单页读取路由state或直接从全局状态取数据填充表单

额外注意事项 #

• 敏感数据不要存在localStorage，优先用sessionStorage，因为关闭浏览器后会自动清空
• 存储表单数据时一定要用JSON.stringify序列化，读取时用JSON.parse解析
• 跳转后最好做数据校验，避免数据过期或被篡改
• 如果项目中有多个表单，建议给每个表单加唯一标识（比如表单ID），存储时带上标识，避免数据冲突

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