使用 httponly cookie 将 JWT 从节点 REST API 发送到 Vue.js SPA

Posted 2023-03-07

【中文标题】使用 httponly cookie 将 JWT 从节点 REST API 发送到 Vue.js SPA

【英文标题】：Using httponly cookie to send JWT from node REST API to Vue.js SPA

【发布时间】：2020-03-12 20:16:12

【问题描述】：

我正在使用 express 构建一个带有 Vue.js 前端和 Node REST API 的 Web 应用程序。我正在尝试进行身份验证，特别是尝试使用 JWT 实现无状态。我将它们完全分开在不同的域上，并且在两者上都使用自签名 SSL 证书以在我的本地环境中使用 HTTPS。我一直在尝试实施here 概述的 JWT 身份验证策略，该策略建议使用快速过期的 JWT 进行授权，同时让 API 还通过 httponly cookie 向客户端传递“刷新令牌”。

我开始意识到，问题是在客户端我使用 axios 来提交请求和处理响应，而 httpOnly cookie 不能被 axios 之类的 javascript 库读取。

冗长的搜索似乎没有任何好的解决方法；所有 JWT 身份验证策略似乎都建议以某种方式使用 httpOnly cookie 来保持登录，并且似乎没有安全的方法可以从 axios 或其他 javascript REST 库访问 httpOnly cookie。这里有什么解决办法吗？我的问题是试图将前端和 API 放在两个不同的域上吗？

【参考方案1】：

是的。跨域貌似要乱了(as referenced here)。

是的，您不能从 javascript 上下文（axios 等）访问 HttpOnly cookie。

当我使用 Vue 进行身份验证时，我在 Nuxt 上运行并且只使用他们的身份验证插件。 Here's that section of their documentation.

在使用 Nuxt 时，您可以（取决于您的意见）甚至将您的 API 作为中间件托管在与 Nuxt 网络应用相同的盒子上。

【讨论】：

我想的也差不多。如果必须，我会回到 Nuxt，这是一个个人项目，我将它用作学习练习，所以如果可以的话，我真的更愿意从头开始做事。将尝试将所有内容放在一个域上，看看我是否无法从那里开始工作。谢谢！

【参考方案2】：

也许你应该试试这个解决方案，使用 store、expressjs 服务器和 httponly cookie 进行简单身份验证 https://github.com/ja-klaudiusz/Nuxt.js-HttpOnly-cookie-auth