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

Question

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

我的申请包括：

• 通过端口3001上的mongoose / MongoDB运行GraphQL Server的Express服务器。
• 使用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

你可以这样做：

• 在Express中创建路由以进行登录
• 在该路线上使用护照中间件
• 在React中创建登录表单
• 通过POST将表单凭据数据发送到该快速登录路由
• 在护照确认用户名和密码正常后，它会向您发回一切正常，您可以将用户发送到您的应用程序。

快递将发送给您取决于您​​想在客户端使用什么。它可以是cookie，令牌（JWT）......

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

我使用类似的设置，如果你需要，我可以给你更多的信息;）