React外部跳转状态丢失：Stripe结账返回后用户认证失效问题

核心原因分析 #

当通过window.location.href跳转到Stripe结账页面时，整个React应用会被完全刷新重启，之前的所有状态（比如checkoutIncrement）都会重置为初始值。你依赖checkoutIncrement触发useEffect的逻辑，在页面刷新后完全失效；同时useEffect是异步执行的，保护路由的权限判断可能在用户状态初始化完成前就已执行，导致被误判为未登录。

具体解决方案 #

1. 同步初始化用户状态 #

把读取localStorage的逻辑从useEffect中抽离，在组件初始化时同步执行，确保保护路由判断用户状态时，currentUser等状态已被正确设置：

// App.js
const [currentUser, setCurrentUser] = useState(null);
const [currentUserEmail, setCurrentUserEmail] = useState(null);
const [currentToken, setCurrentToken] = useState(null);
const [currentUserId, setCurrentUserId] = useState(null);

// 抽离独立的用户校验函数
const checkUserData = () => {
  let userData = localStorage.getItem('store-user');
  if (userData) {
    let userData2 = JSON.parse(userData);
    let existingToken = userData2.token;
    var decoded = jwt_decode(existingToken);
    let expTime = decoded.exp;
    let currentTime = (new Date().getTime() + 1) / 1000;

    if (expTime > currentTime) {
      setCurrentUserEmail(userData2.email);
      setCurrentUser(userData2.username);
      setCurrentToken(userData2.token);
      setCurrentUserId(userData2._id);
    } else {
      localStorage.clear();
    }
  }
};

// 组件初始化时立即同步执行，确保状态提前就绪
checkUserData();

// 保留useEffect处理组件挂载后的后续校验（比如页面刷新场景）
useEffect(() => {
  checkUserData();
}, []); // 空数组确保组件挂载时必执行一次

2. 修复cart.js中的状态更新错误 #

你当前的setCheckoutIncrement(checkoutIncrement ++)是错误写法，++是原地修改旧值，无法触发React状态更新，应改用函数式更新：

// cart.js
if (checkoutData.data.url){
  setCheckoutIncrement(prev => prev + 1); // 函数式更新确保获取最新状态
  window.location.href = checkoutData.data.url;
}

注：由于页面会跳转刷新，这个状态更新对返回后的场景无实际作用，主要是规范写法

3. 添加加载状态避免误判 #

给保护路由添加加载状态，防止在用户状态初始化完成前就执行重定向逻辑：

// App.js
const [isLoading, setIsLoading] = useState(true);

const checkUserData = () => {
  let userData = localStorage.getItem('store-user');
  if (userData) {
    // 原有状态设置逻辑...
  }
  setIsLoading(false); // 状态初始化完成后标记加载结束
};

checkUserData();

// 加载中时显示过渡内容，避免提前判断权限
if (isLoading) {
  return <div>加载中...</div>;
}

return (
  <Routes>
    <Route path="/success" element={currentUser ? <SuccessPage /> : <Navigate to="/login" />} />
    <Route path="/cancel" element={currentUser ? <CancelPage /> : <Navigate to="/login" />} />
    {/* 其他路由 */}
  </Routes>
);

4. 可选：监听localStorage变化（单页内状态同步） #

如果需要在单页内监听localStorage的变化（比如用户登出操作），可以添加全局监听：

useEffect(() => {
  const handleStorageChange = () => {
    checkUserData();
  };

  window.addEventListener('storage', handleStorageChange);
  return () => window.removeEventListener('storage', handleStorageChange);
}, []);

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