分离前端和后端 - 使用 Vue/Webpack/Hapi 进行持久身份验证

Posted 2023-03-10

【中文标题】分离前端和后端 - 使用 Vue/Webpack/Hapi 进行持久身份验证

【英文标题】：Seperate Front and Back-End - Persistent Authentication with Vue/Webpack/Hapi

【发布时间】：2019-03-21 22:56:36

【问题描述】：

我提前为文字墙道歉。

我正在为学校做一个项目。我们正在尝试创建一个带有单独的前端/后端的信使应用程序。 对于后端，我们决定使用 Hapi (NodeJS)，它现在是一个基于 JWT 进行身份验证的工作 API。 假设后端在 http://localhost:3000 上运行。

为了与 API 进行交互并创建一个实际的用户友好型信使，我们决定使用 VueJS，使用 Vuetify 作为设计框架。 我们使用 vue create (Vue CLI3) 创建了一个 webpack 模板，并开始设计一个注册/登录页面，该页面在 http://localhost:8080 上提供。

我现在已经到了必须考虑一种基于身份验证显示不同内容的方法的地步。我可以通过登录从 API 请求 JWT，但我不想将它存储在本地存储中，因为那是不安全的。 cookie 也是如此，如果它们不是 HttpOnly 的话。

我觉得信使应用程序不需要用户每次重新启动浏览器时都登录，所以我需要某种持久性，它只留下一个选项（如果我错了，请纠正我）：HttpOnly cookies包含我们的会话数据，在这种情况下是 JWT。 鉴于我无法使用 Vue（因为它是 JS）设置 HttpOnly cookie，我将如何创建持久身份验证？

如果用户没有登录，我们希望用户被重定向到登录页面。如果他们登录了，他们可以访问和查看额外的功能（Vue 组件）。如果他们刷新或重新启动浏览器，他们应该仍处于登录状态并能够访问 API 提供的功能（例如向他人发送消息、阅读自己的消息）。 这虽然不易受到 XSS 的攻击。

我已经连续 2 天释放我的 Google-fu 并且找不到好的答案。人们使用 VueX，它实际上不是持久的，只能持久地与本地存储一起工作，这对于存储 JWT 也是不安全的。

这完全可以通过单独的前端/后端实现吗？如果我用 Hapi 发回一个 cookie，它可能会工作并存储在浏览器中，但那将是 HttpOnly 那么我如何使用前端读取它以确定我是否通过了身份验证？

请尽可能详细，因为我似乎错过了很多设计原则和背景，这些原则和背景对互联网上的其他人来说显然是非常明显的。老实说，如果对此有一个很好的答案，它将极大地帮助其他人开始。

TL;DR：如何在不牺牲安全性的情况下使用 Vue 前端和 Hapi 后端创建持久身份验证？

【参考方案1】：

据我所知，HTTPOnly cookie 只能在 https 协议上设置

来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies

而且我认为只要您使用 https，将 jwt 令牌存储在本地存储中是安全的

另一个关于 jwt 存储在 reactjs 中的相关线程：https://***.com/a/44209185/10661914