如何在 React/NodeJS 身份验证流程中使用 httpOnly cookie 获取用户数据

Posted 2023-03-10

【中文标题】如何在 React/NodeJS 身份验证流程中使用 httpOnly cookie 获取用户数据

【英文标题】：How to get user data with httpOnly cookie in React/NodeJS authentication flow

【发布时间】：2019-07-17 17:45:41

【问题描述】：

我正在开发一个带有 NodeJS/Express 后端的 React/Redux 客户端。 react 应用在 3000 端口上运行，后端在 443 端口上运行。

这个 React 应用有 3 个 react-router 路由（SignUp、Login 和 Home，最后一个是受保护的，只有经过身份验证的用户才能访问）。

当用户登录时，React 应用程序会使用电子邮件和密码向后端发出 post 请求。服务器在 mongoDB 数据库中搜索用户并返回带有httpOnly 标志的res.cookie。

cookie 是带有一些信息的 jwt，例如 isAdmin 标志。客户端中的 Home 路由有不同的选项，具体取决于用户是否为管理员。

我的 React 客户端如何安全地知道用户是否已登录以及用户是否为管理员？

我找到了 2 个解决方案：

使用 localStorage/sessionStorage 而不是 httpOnly cookie，但我被告知这是非常不安全的。 删除 httpOnly 标志，以便我的客户端可以读取 cookie。我已经对此进行了测试，效果很好，但同样，安全风险让我感到不安。

我感觉我在身份验证流程中遗漏了一些东西。 在此先感谢，并为我的英语不好感到抱歉。

【参考方案1】：

我知道的一个解决方案是在您的后端有一个端点，客户端可以在其中检索用户信息（例如 /users/me）。

基本上，当您的应用程序挂载时，您将向此端点发送请求，获取用户信息，然后用户可以开始访问您的 React 应用程序中的不同路由。

这种方法的一个缺点是，当您在开发环境中时，由于热重载，您在前端所做的每一次更改都将 ping 此后端端点。