使用vue开发时,遇到第二个问题就是刷新后登录的用户信息丢失了,这个主要是由vuex中的数据在页面刷新之后其中的数据会初始化。我们可以结合localStorage或sessionStorage来避免这个问题,如下:
1、在登录成功设置用户信息时,同时保存到sessionStorage
const mutations = {
SET_USER : (state, user) => {
state.user = user;
state.token = user.token;
state.name = user.sys_user_info.name;
sessionStorage.setItem(sessionUserKey, JSON.stringify(user))
}
}
2、在组件初始化时先从sessionStorage读取用户信息,如有则使用当前用户信息,否则使用默认空用户信息
// 空用户对象
const sessionUserKey = "session_user";
const emptyuser = {"token":"","sys_user_info":{"name":""}};
const sessionUserStr = sessionStorage.getItem(sessionUserKey);
const sessionUser = sessionUserStr ? JSON.parse(sessionUserStr) : emptyuser
// 状态
const state = {
token: sessionUser.token || getToken(),
name: sessionUser.sys_user_info.name || '',
user : sessionUser,
}
完毕…