引言:最近在做一个webapp项目,前端需要存储token和user信息,同时需要将user信息存储在vuex中,但是每次刷新页面会把vuex的信息清空,下面是解决的方法。
一.sessionStorage和localStorage的区别?
sessionStorage:页面刷新不会消失,浏览器关闭消失。
localStorage:页面刷新不会消失,浏览器关闭不会消失。持久化在硬盘。
vuex:页面刷新即消失。
1.登录
登录后将token和user信息保存在localstorage。
image.png
需要注意的地方是localstorage只能存储String类型的数据,所以我们先把user对象 JSON.stringify(user) 转换成json字符串,获取的时候再JSON.parse即可。
此时也将user信息保存再vuex中。
2.为了防止页面刷新vuex消失,我在路由的钩子函数中将localstorage的user重新赋值给了vuex。
搞定!
网友评论