如何使用 React 处理维护过程

问题描述

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

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

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. 是否有更好的方法来处理维护过程？

谢谢。

解决方法

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

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

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