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

Question

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

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


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

我使用历史记录模式，但如果我重新加载我的网页，我的商店是空的。 有一个解决方案吗？

Answer 1

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

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

   中的数据

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

2. 寻找Cookie，确定它们有助于保存您的令牌被XSS带走，但您必须确保提供csrf-token以防止CSRF（跨站点请求伪造）攻击

   如果您打算继续使用Cookie，请确保标题中的httpOnly标记设置为true，否则它们就不行了。

总的来说，我已经看到localStorage一直是维护令牌和其他应用数据的常用解决方案。

我会在此答案中添加资源以供参考。

1. CSRF Token necessary when using Stateless(= Sessionless) Authentication? 检查接受的答案和其他答案。

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的陷阱和方法。

Answer 2

1. 如果您刷新页面（F5），您将重新运行您的应用程序，因此除非您使用某些数据初始化商店，否则它将在应用程序启动时显示为空。

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

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

Answer 3

您可以将状态缓存到sessionStorage，这将在页面（选项卡）刷新事件中存活，但在页面或浏览器关闭时将被清除。

Docs about sessionStorage