如何等待window.location.replace()执行完成后再获取Cookie值？

首先明确核心：window.location.replace执行后，当前页面的JavaScript环境会被直接销毁，后续代码根本没有机会执行，所以用await完全没用——这不是异步任务等待的问题，是页面直接被替换，原页面所有代码都会终止运行。

正确的做法是把逻辑拆分到页面跳转前后的两个阶段：

1. 原页面只负责判断是否存在目标Cookie，不存在则跳转到登录页（带上当前页面URL作为state参数）
2. 登录成功后，服务端会设置Cookie并跳回state指定的原页面，此时在原页面的useEffect中重新检查并获取Cookie

修改后的代码示例 #

useEffect(() => {
  // 检查当前页面是否已有目标Cookie
  const cookies = document.cookie?.split(';');
  const authCookie = cookies?.find(cookie => cookie.includes('some-cookie'));

  if (authCookie) {
    // 存在Cookie，直接解析token
    const accessToken = authCookie.split('=')[1];
    // 这里可处理token，比如存入状态或localStorage
    console.log('获取到登录token:', accessToken);
  } else {
    // 不存在Cookie，跳转到登录页并携带当前页面URL作为跳转回地址
    const REACT_APP_LOGIN_URL = 'https://someurl/login';
    const currentUrl = window.location.href;
    const loginRedirectUrl = `${REACT_APP_LOGIN_URL}?state=${encodeURIComponent(currentUrl)}`;
    window.location.replace(loginRedirectUrl);
  }
}, []);

关键注意事项 #

• 确保登录服务端设置some-cookie时，Cookie的Domain、Path、SameSite等属性配置正确，保证跳转回原页面后能读取到该Cookie
• 登录服务端需要支持state参数，登录成功后自动跳转到该参数指定的URL

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