Express 和 React Routes 如何处理来自浏览器的初始 GET 请求？

Question

我是 react 世界和整个全栈世界的新手，但我一直在无休止地寻找以下问题的答案，非常感谢一些指导。

我正在使用 React 和 Express 创建一个应用程序。它需要身份验证，所以我打算使用 Passport 来提供帮助。客户端 JS 使用 React Routers 浏览网站。没关系，但我的问题是浏览器发出的初始 GET 请求。

我将首先描述我的具体应用要求，然后概括我不理解的内容。

正如我所说，我的应用程序需要 OAuth2 身份验证。如果您尝试在我的网站上获取路径并且您没有登录，它应该只加载登录页面。如果您已登录，则正常加载并找到您的路径。与 facebook 类似，我希望登录 URL 与“提要”页面相同。如此类似于 facebook.com '/' 路由是登录页面还是您的新提要，具体取决于您是否已登录，我想要同样的东西。

据我了解，Passport 通过检查请求标头在后端进行身份验证。所以我知道我应该有某种中间件，上面写着“如果用户已登录，则继续沿着路线走，否则会呈现登录页面”......这是怎么做到的？代码会是什么样子？我对 Express 的唯一体验来自一个介绍类，该类使用 res.render 发送回 HTML 文件并将其通过一些模板引擎（如把手）传递。但我不知道它如何与反应路线一起工作。我还会使用 res.render() 吗？还有什么？

假设我的 index.html 有根 div 来注入反应。如果我不得不猜测，我会用带有路由的 .js 文件发回那个 index.html 页面，并以某种方式在后端发回我希望它在我的反应路由上匹配的路由（登录或用户）要求）？？

更一般地说，我想我只是对如何使用反应路由完成对网站的初始请求感到困惑。 1）服务器如何与一切交互以呈现我要求的内容？ 2）代码会是什么样子。我对 React 的唯一体验来自 Udemy 基础课程，该课程仅使用“react-scripts start”来呈现页面。

花了一整天谷歌搜索这个问题后，它把我带到了 SSR，它本身就是一个兔子洞，我什至不确定它是否需要帮助我。是吗？

我显然缺少一些基础知识，因为这真的让我很困惑，所以如果您有任何资源可以了解更多信息，请发布它们。谢谢！

Answer 1

我认为您正在努力解决的根本差距源于那些“入门课程”将整个浏览器客户端推入应用程序服务器以快速启动和运行，例如，Node 服务器呈现整个 React app AND 作为 API 运行...

 // Ajax request from React app to: http://example.com/api

app.use('/api/*'),()=> {
   res.send({ <!-- some JSON object -->})
})

// User visits in browser: http://example.com/**/*     

app.use('/*',()=>{
   res.render(<!-- entire React App sent to browser -->)
})

第一个请求（假设用户没有访问 /api/* ）只会发送 React 包。客户端内的进一步用户导航通常会将 XHR 请求（或打开的 WebSockets）从 React 应用程序发送到在同一节点程序上运行的 Express 路由。

在许多情况下，将程序的这些部分分开是有意义的，因为反应是从与请求数据的位置完全不同的位置传递的。这有很多原因，但优化计算资源以满足他们对 CPU、内存、网络等的不同需求以及代码/部署的可管理性是我的重要原因。

例如...

• 用户访问：http://example.com*

  1. Nginx、Apache、“云代理”.etc 将流量定向到静态 React 包，该包没有身份验证并且永远不会与您的节点服务器联系。
  2. 如果用户之前有 Authenticate，他们将在本地存储中拥有令牌（如果您使用 JWT 进行身份验证），并且您的 React 应用将被配置为在首次加载时始终检查这些令牌。
  3. 如果用户有一个令牌，它将在后台发送一个 Ajax 请求，该令牌作为一个 Header Bearer，并将发回用户数据，然后将他们重定向到一个“经过身份验证的页面”，就像您提到的 FB 提要一样。李>
  4. 如果他们没有令牌或令牌身份验证失败，那么 React 会将他们重定向到登录或注册页面

反应

React 基本上是浏览器的原生“位置”功能（在您的域名之后显示的内容）。因此，初始页面加载后的任何事件（按钮点击等）都完全由 React 在内部处理，并使用这些路由来确定要显示的内容或通过 Ajax (XHR) 从 API 获取的数据。

如果用户执行硬页面重新加载，则该请求将返回服务器并重新执行整个循环

反应路由器

允许你同时做两件事...

1. 操纵浏览器Location和History对象。
2. 通过检测更改和发送事件，在其他地方使用该历史记录和位置信息。

SSR

我只是玩弄了 SSR，所以我可以和它说话，但它为初始渲染提供了极低的延迟，在 1 个网络请求中完成，所以你想在程序的重要区域使用它。

不确定这是否能回答您的问题，但如果您希望我详细说明任何内容或提供一些更详细的资源，请告诉我。

Answer 2

我理解您的挣扎，因为在将前端与后端（尤其是 React 和 Node.所以首先，我们知道浏览器/客户端总是会向服务器发起请求，那么 React Router 是如何控制路由的呢？其实它很简单，你所要做的就是从你的快递服务器的任何路线返回整个反应应用程序。代码将如下所示：

const express = require('express');
const app = express();

app.get('/*', (req, res, next) => {
  // Return React App index.html
});

app.listen(3000);

一旦 react 应用程序在用户浏览器上呈现（不要担心路径，因为 react 会根据您在客户端编写的代码根据 URL 自动呈现，它还会处理身份验证与提要页面当它扫描您的本地存储、cookie 等时，它将控制路由，而不是发送到 express 服务器的请求。但是当我们从服务器请求数据时会发生什么，它会在每个路由上返回 react app，所以我们需要设置一个 api 路由来处理任何数据请求。

app.get('/api/v1/*', (req, res, next) {
  // Return some data in json format 
});

希望这能让您深入了解您在寻找什么。