如何在快速服务器的每个 React 页面上运行中间件

分享于2022年07月17日 express javascript node.js reactjs 问答
【问题标题】:如何在快速服务器的每个 React 页面上运行中间件(How to run middleware on each React page in express server)
【发布时间】:2022-01-26 13:02:22
【问题描述】:

我正在运行一个快速服务器,如果没有其他特定的 URL 不满足,用户将被重定向到 React 应用程序:

app.get("*", verify, (req, res) => {
  if (maintenance) {
    return res.sendFile("./maintenance.html", { root: __dirname });
  }

  return res.sendFile(
    path.resolve(__dirname, "../frontend/build", "index.html")
  );
});

这会成功运行 verify 中间件,以检查发出请求的用户是否已登录,如果未登录,则将他们重定向到另一个服务以供他们登录。

我会认为,由于正在使用的所有 URL 都通过整个 Web 应用程序通过这个快速服务器,所以无论用户在哪个页面上,验证中间件都会被执行。但是,只有在尚未访问过该站点(未缓存)的浏览器上打开站点或用户强制刷新页面时,才会执行此中间件。

我是 React 的新手,这让我相信 React 会加载整个应用程序,并且在每次页面更改时(例如从 /home 到 /profile)它不会更改 url,只是加载已加载的应用程序部分,因此无论用户在哪个页面上,express 始终会看到用户仅在根域上。

如果不在前端执行任何此类逻辑,我将如何通过此操作。例如。在将 react 应用上的每个页面加载到视图之前运行 verify 函数


【解决方案1】:

由于 React 是所有客户端渲染,您需要在您的 React 路由器中处理该中间件,而不是您的 Node 路由器。在前端,我们称之为“中间件”保护路由。

总体而言,您需要在前端保护这些路由,因为当您在 React 中更改页面时,Node 不知道它(因为 React 是客户端呈现的)。