如何使用 React 处理维护过程答案

【问题标题】：How to handle maintenance process with React如何使用 React 处理维护过程
【发布时间】：2021-07-01 22:34:45
【问题描述】：

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

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

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>
    );
}

这工作正常，但是当我们将它切换到维护模式时，一些用户仍然可以使用默认路由访问应用程序（这在后端关闭时不好），我认为这是因为浏览器缓存或其他原因.

我的问题是：

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

谢谢。

【问题讨论】：

一种选择是在您请求后端检测指示维护模式的特定错误并在那里显示适当的错误时。
这是个好主意，在这种情况下，我需要知道 BE 在维护期间的行为，然后决定如何处理用户（重定向、重新加载或显示错误）。好的，我知道了，谢谢。

标签： reactjs react-router maintenance maintenance-plan maintenance-mode

【解决方案1】：

我认为最好的办法是同时拥有 BE 和 FE 的维护状态：

对于BE，在维护期间，每当有请求来时，它总是返回一个特定的错误代码，FE会理解。
对于 FE，请保持您现在的实现，另外，在您的 API 请求中添加一个中间件，以检测它是否有带有您定义的错误代码的响应，它将重定向回您的维护页面。

所以在有浏览器缓存的情况下（你的场景），即使它可以去正常的路由，下次 FE 向 BE 发送请求时，它也会被重定向到你的维护页面。

【讨论】：