使用Passport的Express server、ReactJS和中继应用程序的身份验证策略

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

我的申请包括：

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

我有一个脚本，可以同时启动服务器和客户端（

npmstart

），这使它可以正常工作。服务器已加载，客户端已加载，浏览器在端口3000打开，并在端口3001的服务器上使用RelayJs请求GraphQL数据。都很好

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

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

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

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

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

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

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

我可以看到两种方法：

a） 构建一个代理服务器，专门处理端口3000上的身份验证。如果经过身份验证，它将代理到真实的ReactJS应用程序，该应用程序将在另一个内部端口上运行。但这样做，我无法了解用户在第一次访问端口3000时将如何获得用于登录的应用程序。要做到这一点，我还必须更改我的客户端，因为它是一个

create-react-app

，弹出时嵌入了webpack-dev-server（事实上，在弹出后，我不太理解客户端脚本中的内容）。简言之，令人困惑，需要改变我的架构

b） 将Passport添加到我的应用程序中。这将不起作用，因为密码是要在节点（服务器端）上运行的生成。我不知道这是否可行，也不知道如何做到

---

在这些“不清晰和混乱”的架构之后，我不知道该怎么做

您可以这样做：

• 在express中创建用于登录的路由
• 在该路线上使用passport中间件
• 在React中创建登录表单
• 通过POST将表单凭证数据发送到该快速登录路径
• 在passport验证用户名和密码是否正确后，它会将您发送回一切正常，您可以将用户发送到您的应用程序

express将发送给您的内容取决于您希望在客户机上使用的内容。它可以是cookie、令牌（JWT）

这样，您就可以在graphql之前处理Auth，而不使用graphql（API打开/graphql，login打开/login）

---

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

您可以这样做：

• 在express中创建用于登录的路由
• 在该路线上使用passport中间件
• 在React中创建登录表单
• 通过POST将表单凭证数据发送到该快速登录路径
• 在passport验证用户名和密码是否正确后，它会将您发送回一切正常，您可以将用户发送到您的应用程序

express将发送给您的内容取决于您希望在客户机上使用的内容。它可以是cookie、令牌（JWT）

这样，您就可以在graphql之前处理Auth，而不使用graphql（API打开/graphql，login打开/login）

---

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

请提供更多信息@AndrijaWell，我正在使用JWT和Passport。将有效凭据发送到

/login

路由后，Express返回令牌，我将该令牌存储在客户端的本地存储中。我在React应用程序在

/GraphQL

路径上发出的每个GraphQL请求的标题中都包含了这个令牌，这基本上就是它的全部内容。请提供更多信息@AndrijaWell，我正在使用JWT和Passport。将有效凭据发送到

/login

路由后，Express返回令牌，我将该令牌存储在客户端的本地存储中。我在应用程序在

/GraphQL

路由上做出的每个GraphQL请求的头中都包含了这个令牌，这基本上就是它的全部内容。