如何使用 React 处理维护过程

Question

这是我的应用当前处理维护过程的方式：

我有一个应用状态的环境变量：

REACT_APP_SITE_MODE=“LIVE” | “MAINTENANCE”

我正在使用 react-router 路由应用程序：

switch (process.env.REACT_APP_SITE_MODE) {
  case "MAINTENANCE":
    return (
      <Switch>
        <Route component={MaintenancePage} />
      </Switch>
    );
  default:
    return (
      <Switch>
        {/* Default routes */}
      </Switch>
    );
}

这很好用，但是当我们把它切换到维护模式时，一些用户仍然可以使用默认路由访问应用程序（这在后端关闭时不好），我认为这是浏览器缓存的原因什么的。

我的问题是：

1. 维护期间如何防止用户访问应用？ （强制他们在特定时间清除缓存？）
2. 是否有更好的方法来处理维护过程？

谢谢。

Answer 1

我认为最好的办法是让 BE 和 FE 都处于维护状态：

• BE在维护期间，只要有请求过来，总是returns一个特定的错误码，FE会理解
• 对于 FE，保持你现在的实现，另外，在你的 API 请求中添加一个中间件来检测它是否有你定义的错误代码的响应，它会重定向回你的维护页面。

所以在有浏览器缓存的情况下（你的场景），虽然可以走正常路由，但是下次FE向BE发送请求时，会重定向到你的维护页面。