vue.js - 如果我刷新我的网页，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:正如您所说，将 token 存储在 localStorage 中的问题在于该应用容易受到 XSS(跨站点脚本)攻击。除此之外，它是相当安全的。 localStorage 绑定(bind)到域，因此 www.yourapp.com 的数据即使在浏览器关闭后也会保留在那里，这与 cookie 不同，您不必管理哪个站点发出了请求。具有相同域的浏览器上的所有选项卡将能够使用 localStorage

   中的数据

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

2. 使用 cookie，确保它们有助于保存被 XSS 夺走的 token ，但随后您必须确保还提供 csrf-token 以防止 CSRF(交叉站点请求伪造)攻击。

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

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

我会在这个答案中添加来源以供引用。

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