关于vuex页⾯刷新后保存数据安全问题
问题描述
在做⼀个vue单页⾯项⽬是，我们通常会将公有数据存储在vuex⾥，但在页⾯刷新的时候，vuex⾥state的数据会重置，所以我们采⽤的⽅法通常是先将数据放到 localstorage 或 sessionstorage ⾥，当页⾯刷新后，在beforeCreate⽣命周期⾥重新赋值，问题来
了，localstorage 或 sessionstorage的值是可以改变的，当页⾯刷新后，它改变的值会赋到vuex⾥，这是个安全问题
问题解决
我们可以在主页⾯（像home.vue,）的mounted⾥写上这样⼀⾏代码
home.vue
data（）{
return {
/
/获取vuex⾥的值
user: this.$store.state.user
}
},
beforeCreate() {
// 页⾯刷新后赋给vuex值
this.$storemit(
"newUser",
JSON.parse(Item("user"))
);
},
mounted() {
// user为要储存的数据
veItem("user");
window.localStorage.setItem("user", JSON.stringify(this.user));
return;
};sessionstorage和localstorage
},
vuex
随意写的demo，官⽅不推荐这种写法
state: {
user: JSON.parse(Item("user")),
},
mutations: {
newUser(state, users) {
state.user = users;
}
}
好了，这样⽤户改了localstorage 或 sessionstorage的值也没⽤了，每次页⾯刷新前，localstorage 或sessionstorage的值都会被重新赋值成vuex⾥的值，⽽vuex⾥的值，⼜⽆法直接改变。
如果您有更好的⽅法，欢迎评论，让我们⼀起进步

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。