如何在不缓存 JavaScript/ReactJS 中的重定向的情况下重定向页面？答案

【问题标题】：How to redirect page without caching the redirection in JavaScript/ReactJS?如何在不缓存 JavaScript/ReactJS 中的重定向的情况下重定向页面？
【发布时间】：2020-09-27 23:03:25
【问题描述】：

我的 TypeScript ReactJS SSR 应用程序中有这个逻辑：

public login() {
  let error: boolean = false
  const isLoggedIn: boolean = doSomeLogicHereLikeBackendCheck()
  if(isLoggedIn) {
    window.location.href = "/home" // this is getting cached (302 - Cached)
  } else {
    // stay in "/login"
    error = true
  }  
}


...

// call login
login()

现在，我现在使用 Chrome。当用户成功登录后，我通过window.location.href 将他重定向到/home。那没问题。但是，问题在用户注销后开始。当用户注销时，如果他尝试使用/login 路径再次登录，他会立即重定向到/home 而不是登录页面。（当然他没有登录只是重定向回了家）。我检查了网络，似乎 Chrome 确实缓存了我的redirect？！

如何确保仅在用户登录后才重定向用户？如何使此重定向无缓存？因此，如果用户再次访问 /login 页面，我将显示登录页面（如果未登录）或如果已登录，我将重定向到 /home...我想控制重定向。

我也试过window.location.replace('/home')。没有运气。

【问题讨论】：

标签： javascript reactjs typescript ecmascript-6 server-side-rendering

【解决方案1】：

我已经通过指定no-cache解决了这个问题：

  response.headers['Cache-Control'] = 'no-cache, no-store'
  response.headers['Pragma'] = 'no-cache'
  response.headers['Expires'] = 'Mon, 01 Jan 1990 00:00:00 GMT'

【讨论】：

【解决方案2】：

您可以在网址中添加日期。

var url = "https://example.com/cachedResource";
window.location = url + (url[url.length-1] === "?" ? "" : "?") + new Date().getTime();

如果网址最后一个字符是“？”添加日期。否则添加“？”在添加日期之前。这样您就可以在不更改服务器的情况下避免缓存。

PD：我 100% 确信您可以用更少的代码做到这一点。

【讨论】：