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

Posted 2023-03-08

【中文标题】使用 Passport 的 Express 服务器、ReactJS 和 Relay 应用程序的身份验证策略

【英文标题】：Authentication strategy for Express server, ReactJS and Relay application using Passport

【发布时间】：2018-04-21 15:09:57

【问题描述】：

在构建我的 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 应用程序。这不起作用，因为密码是构建在节点（服务器端）上运行的。我不知道这是否可能或如何做到。

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

【参考方案1】：

你可以这样做：

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

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

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

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

【讨论】：

请更多信息@Andrija

好吧，我正在使用 JWT 和 Passport。将有效凭据发送到/login 路由后，Express 返回令牌，我将该令牌存储在客户端的本地存储中。我将该令​​牌包含在 React 应用程序在 /graphql 路由上发出的每个 GraphQL 请求的标头中，这基本上就是它的全部内容。