我对文字墙表示歉意。
我正在为一个学校项目工作。我们正在尝试创建具有单独前端/后端的Messenger应用程序。 对于后端，我们决定使用Hapi（NodeJS），它现在是基于JWT进行身份验证的有效API。 假设后端运行在http://localhost:3000上。
为了与API交互并创建一个实际的用户友好的Messenger，我们决定使用Vuetify作为设计框架来使用VueJS。 我们使用vue create（Vue CLI3）创建了一个Webpack模板，并开始设计一个注册/登录页面，该页面在http://localhost:8080上提供。
我现在已经到了必须考虑一种基于身份验证来显示不同内容的方法的地步。我可以通过登录从API请求JWT，但我不想将其存储在本地存储中，因为这是不安全的。如果不是HttpOnly，则cookie也是如此。
我觉得Messenger应用程序不需要用户在每次重新启动浏览器时都登录，因此我需要某种持久性，这只剩下一个选项（如果我错了，请纠正我）：HttpOnly cookies包含我们的会话数据，在这种情况下为JWT。 看到我无法使用Vue（因为它是JS）设置HttpOnly cookie，我将如何创建持久身份验证？
如果用户未登录，我们希望将其重定向到登录页面。如果已登录，则他们可以访问并查看其他功能（Vue组件）。如果他们刷新或重新启动浏览器，它们仍应登录并能够访问API提供的功能（例如向他人发送消息，阅读自己的消息）。 这虽然不易受到XSS的攻击。</ em>
我已经连续两天释放我的Google-fu，但是找不到合适的答案。人们使用的VueX实际上不是永久性的，只能与本地存储永久性地工作，这再次对于存储JWT不安全。
使用单独的前端/后端是否完全有可能？如果我使用Hapi发送回cookie，该cookie可能会起作用并存储在浏览器中，但是它将是HttpOnly，因此如何与前端一起读取它以确定我是否已通过身份验证？
请尽可能地冗长，因为我似乎错过了许多设计原理和上下文，这些原理和上下文对于互联网上的其他所有人而言显然是非常明显的。老实说，我相信，如果对此有一个很好的答案，它将对其他人有很大帮助。
TL; DR：如何在不牺牲安全性的情况下使用Vue前端和Hapi后端创建持久身份验证？
答案 0 :(得分：0)
据我所知，只能在 https 协议
上设置HTTPOnly cookie源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies
而且我认为只要您使用https，就可以将jwt令牌存储在本地存储中
另一个有关jwt存储在reactjs中的相关线程：https://stackoverflow.com/a/44209185/10661914