如果我刷新我的网页,Vuex 存储为空
Vuex store empty if i refresh my webpage
如果我刷新网页,如何保留我的商店?
let store = new Vuex.Store( {
modules: {
demo, auth
},
strict: true
} );
let router = new VueRouter( {
mode: 'history',
saveScrollPosition: true,
routes: routes
} )
我使用历史模式,但如果我重新加载我的网页,我的商店是空的。
有解决办法吗?
如果您刷新页面 (F5),您将重新运行您的应用程序,因此除非您使用一些数据初始化商店,否则它会像应用程序启动时一样为空.
您可以决定在这种情况下要保留哪些状态并将它们保存到 cookie/LocalStorage 中,然后在您的 app.js
中将它们从 cookie/LocalStorage 加载到商店。对于诸如身份验证令牌等之类的东西,这将是常见的做法,因为您希望在页面刷新的情况下让用户保持登录状态。
来自 Stormpath 的关于存储令牌的好 post:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage
如果当您从一条路线导航到另一条路线时 Vuex 商店和整个应用程序正在重新加载 - 您的应用程序有问题,可能是您没有正确使用 VueRouter 导航。
您可以将您的状态缓存到 sessionStorage
,它将在页面(选项卡)刷新事件中保留下来,但会在页面或浏览器关闭时被清除。
要在应用刷新后保留状态数据,您可以使用 localStorage
或 sessionStorage
。
XSS:正如您所说,在 localStorage
中存储令牌的问题是关于应用程序容易受到 XSS (cross-site-scripting) 攻击。除此之外,它是相当安全的。 localStorage
绑定到域,因此 www.yourapp.com
的数据即使在浏览器关闭后也会保留在那里,这与 cookie 不同,您不必管理哪个站点发出请求。同域浏览器的所有标签页都可以使用localStorage
中的数据
如果不需要上述行为,您可以选择 sessionStorage
,它的工作方式几乎相同,但浏览器关闭时数据会被清除。
使用 cookie,确保它们有助于保存你的令牌被 XSS 夺走,但你必须确保你还提供 csrf-token
以防止 CSRF(跨站点请求伪造)攻击。
如果您打算继续使用 cookie,请确保它们在 headers 中将 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 的陷阱和 how-to。
如果我刷新网页,如何保留我的商店?
let store = new Vuex.Store( {
modules: {
demo, auth
},
strict: true
} );
let router = new VueRouter( {
mode: 'history',
saveScrollPosition: true,
routes: routes
} )
我使用历史模式,但如果我重新加载我的网页,我的商店是空的。 有解决办法吗?
如果您刷新页面 (F5),您将重新运行您的应用程序,因此除非您使用一些数据初始化商店,否则它会像应用程序启动时一样为空.
您可以决定在这种情况下要保留哪些状态并将它们保存到 cookie/LocalStorage 中,然后在您的
app.js
中将它们从 cookie/LocalStorage 加载到商店。对于诸如身份验证令牌等之类的东西,这将是常见的做法,因为您希望在页面刷新的情况下让用户保持登录状态。 来自 Stormpath 的关于存储令牌的好 post:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage如果当您从一条路线导航到另一条路线时 Vuex 商店和整个应用程序正在重新加载 - 您的应用程序有问题,可能是您没有正确使用 VueRouter 导航。
您可以将您的状态缓存到 sessionStorage
,它将在页面(选项卡)刷新事件中保留下来,但会在页面或浏览器关闭时被清除。
要在应用刷新后保留状态数据,您可以使用 localStorage
或 sessionStorage
。
XSS:正如您所说,在
中的数据localStorage
中存储令牌的问题是关于应用程序容易受到 XSS (cross-site-scripting) 攻击。除此之外,它是相当安全的。localStorage
绑定到域,因此www.yourapp.com
的数据即使在浏览器关闭后也会保留在那里,这与 cookie 不同,您不必管理哪个站点发出请求。同域浏览器的所有标签页都可以使用localStorage
如果不需要上述行为,您可以选择
sessionStorage
,它的工作方式几乎相同,但浏览器关闭时数据会被清除。使用 cookie,确保它们有助于保存你的令牌被 XSS 夺走,但你必须确保你还提供
csrf-token
以防止 CSRF(跨站点请求伪造)攻击。如果您打算继续使用 cookie,请确保它们在 headers 中将
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 的陷阱和 how-to。