如果我刷新我的网页，Vuex 存储为空

Question

如果我刷新网页，如何保留我的商店？

     let store = new Vuex.Store( {
    modules: {
        demo, auth
    },
    strict: true
} );

let router = new VueRouter( {
    mode: 'history',
    saveScrollPosition: true,
    routes: routes
} )

我使用历史模式，但如果我重新加载我的网页，我的商店是空的。有解决办法吗？

原文由 Seb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要在应用刷新后保留状态数据，您可以使用 localStorage 或 sessionStorage 。

1. XSS：正如您所说，在 localStorage 中存储令牌的问题是关于该应用程序容易受到 XSS（跨站点脚本）攻击。除此之外，它是相当安全的。 localStorage 绑定到域，因此 www.yourapp.com 的数据即使在浏览器关闭后也会保留在那里，这与 cookie 不同，您不必管理哪个站点发出请求.具有相同域的浏览器上的所有选项卡将能够使用 localStorage 中的数据

如果不需要上述行为，您可以选择 sessionStorage ，它的工作方式几乎相同，但浏览器关闭时数据会被清除。

1. 寻找 cookie，确保它们将帮助保存你的令牌被 XSS 拿走，但你必须确保你还提供 csrf-token 以防止 CSRF（跨站点请求伪造）攻击。

如果您打算继续使用 cookie，请确保它们在标头中将 httpOnly 标志设置为 true，否则它们就不好。

总的来说，我发现 localStorage 是一种非常普遍推荐的用于维护令牌和其他应用程序数据的解决方案。

我会在这个答案中添加来源以供参考。

1. 使用无状态（=无会话）身份验证时需要 CSRF 令牌吗？ 检查接受的答案和其他答案。

2. https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md

3. https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

4. https://www.whitehatsec.com/blog/web-storage-security/ 这会让您了解使用 localStorage 的陷阱和操作方法。

原文由 Amresh Venugopal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

1. 如果您刷新页面 (F5)，您将重新运行您的应用程序，因此除非您使用一些数据初始化商店，否则它会像应用程序启动时一样变空。

2. 在这种情况下，您可以决定要保留哪些状态并将它们保存到 cookie/LocalStorage 中，然后在您的 app.js 它们从 cookie/LocalStorage 加载到商店中。对于诸如身份验证令牌等之类的东西，这将是常见的做法，因为您希望在页面刷新的情况下让用户保持登录状态。 Stormpath 关于存储令牌的好帖子： https ://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

3. 如果 Vuex 商店和整个应用程序在您从一条路线导航到另一条路线时被重新加载 - 您的应用程序有问题，可能是您没有正确使用 VueRouter 导航。

原文由 Marek Urbanowicz 发布，翻译遵循 CC BY-SA 3.0 许可协议