使用 Passport 的 Express 服务器、ReactJS 和 Relay 应用程序的身份验证策略

Question

在构建我的 ReactJS 应用程序几周后，是时候为它添加身份验证了。这让我很困惑。

我的应用程序由以下部分组成：

• Express 服务器通过 mongoose/MongoDB 在端口 3001 上运行 GraphQL 服务器。
• 带有 React Router V4 的客户端 ReactJS + Relay 应用程序，在端口 3000 上运行。

我有一个脚本可以同时启动服务器和客户端 (npm start)，这使得一切正常。服务器已加载，客户端已加载，浏览器在 3000 端口打开，并在 3001 端口使用服务器上的 RelayJs 请求 GraphQL 数据。一切正常。

我过去使用 LocalStrategy 使用过 Passport 身份验证。 Passport 进入数据库，检查用户名和密码，并使用快速中间件中的路由器让请求继续进行。工作正常，但是 - 在服务器端 - 不是在客户端。

我的目标是让用户启动客户端应用程序（今天将浏览器指向端口 3000）和他们：

• 如果未授权，它将被重定向到登录页面。

• 如果通过身份验证，用户将被重定向到应用程序。

• 使用“记住我”，用户可能会在不登录的情况下返回应用程序（在同一浏览器中一段时间​​ - 一整天）。

• 如果用户不记得用户名/密码，要求重置，新凭据将通过电子邮件发送。

目前我看不出这些东西将如何协同工作。 Passport 在服务器上运行，所有逻辑都在客户端完成（除了在 MongoDB 上收集用户信息）。

我可以看到两种方法：

a) 构建一个代理服务器，它将专门处理端口 3000 上的身份验证。如果经过身份验证，它将代理到真正的 ReactJS 应用程序，该应用程序将在另一个内部端口上运行。但是这样做，我无法知道用户在第一次访问端口 3000 时将如何获取登录应用程序。为此，我还必须更改我的客户端，因为它是使用 webpack-dev-server 弹出的create-react-app嵌入式（实际上在弹出后我不太了解客户端脚本中发生了什么）。简而言之 - 令人困惑，需要改变我的架构。

b) 将 Passport 添加到我的 ReactJS 应用程序。这不起作用，因为密码是构建在节点（服务器端）上运行的。我不知道这是否可能或如何做到。

在这些“不清楚和令人困惑”的架构之后，我不知道该怎么办。

Answer 1

你可以这样做：

• 创建快速登录路由
• 在该路由上使用护照中间件
• 在 React 中创建登录表单
• 通过 POST 将表单凭据数据发送到该快速登录路径
• passport 验证用户名和密码都正常后，它会向您发送一切正常的信息，您可以将用户发送到您的应用程序。

什么快递会寄给你取决于你想在客户上使用什么。可以是cookie、token（JWT）...

这样你在 graphql 之前处理 Auth 而没有 graphql（API 在 /graphql 上，登录在 /login 上）

我使用类似的设置，如果您需要，我可以为您提供更多信息；）