如果我刷新我的网页，Vuex 商店是空的

Posted 2023-02-22

【中文标题】如果我刷新我的网页，Vuex 商店是空的

【英文标题】：Vuex store empty if i refresh my webpage

【发布时间】：2017-08-20 05:00:25

【问题描述】：

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

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


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

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

【问题讨论】：

使用本地存储？

localstorage 是保存令牌 ID 的一个不错的解决方案吗？这不是一个糟糕的安全性？

不，安全性还不错。

【参考方案1】：

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

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

如果不需要上述行为，你可以去sessionStorage，它的工作原理几乎相同，但关闭浏览器时数据会被清除。

使用 cookie，确保它们有助于保存您的令牌被 XSS 带走，但您必须确保您还提供 csrf-token 以防止 CSRF（跨站点请求伪造）攻击。

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

总体而言，我已经看到 localStorage 一直是维护令牌和其他应用程序数据的非常普遍推荐的解决方案。

我将在此答案中添加来源以供参考。

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

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

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

https://www.whitehatsec.com/blog/web-storage-security/这会让你知道使用localStorage的陷阱和方法。

【参考方案2】：

如果您刷新页面 (F5)，您将重新运行您的应用程序，因此除非您使用一些数据初始化存储，否则应用程序启动时它将为空。

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

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

【讨论】：

cookie 或 localstorage 来保存数据？ ，如果你将令牌 id 保存在 cookie 或 localstorage 中，这是一种不好的做法，不是吗？

不，您没有其他选择 SPA - stormpath.com/blog/… 。 Cookie 是最安全的选择。

【参考方案3】：

您可以将您的状态缓存到sessionStorage，这将在页面（标签）刷新事件中继续存在，但会在页面或浏览器关闭时被清除。

Docs about sessionStorage