解决vue-element-admin保存数据在localStorage,刷新后被清空的问题
项目需求:登录的时候后台除了返回token,还返回了一个角色列表。除了要存储token,还需要把角色列表保存到localStorage中。出现问题:使用正常操作把角色列表保存到localStorage中,但是一刷新,角色列表就被清空了。解决方法:一、在登录的时候保存角色列表,在此目录下操作:以下直接贴出此文件的代码:注意:主要的逻辑是写了注释的代码const getDefaultState = (
·
项目需求:登录的时候后台除了返回token,还返回了一个角色列表。除了要存储token,还需要把角色列表保存到localStorage中。
出现问题:使用正常操作把角色列表保存到localStorage中,但是一刷新,角色列表就被清空了。
解决方法:
一、在登录的时候保存角色列表,在此目录下操作:
以下直接贴出此文件的代码:
注意:主要的逻辑是写了注释的代码
const getDefaultState = () => {
return {
token: getToken(),
//存储menulist
menulist: []
};
};
const state = getDefaultState();
const mutations = {
RESET_STATE: state => {
Object.assign(state, getDefaultState());
}
// 角色列表
SET_MENULIST: (state, data) => {
state.menulist = data
}
};
const actions = {
//登录
login ({ commit }, userInfo) {
const menulist = [] //存储menulist的盒子
const { username, password } = userInfo;
const formdata = new FormData();
formdata.append('username', username.trim())
formdata.append('password', password)
return new Promise((resolve, reject) => {
login(formdata)
.then(response => {
const data = response.data;
menulist.push(data.userAuth.userAuth) //将后端拿到的角色列表添加到menulist
localStorage.setItem('menulist', JSON.stringify(data.userAuth.userAuth))//将角色列表存储在localStorage中
commit('SET_MENULIST', menulist) //角色列表
commit("SET_TOKEN", data.token.value);
commit("SET_NAME", data.userInfo.nickname);
commit("SET_ACCOUNT", data.userInfo.userId);
commit("SET_ROLE", "null");
commit("SET_AVATAR", data.userInfo.avatar);
setToken(data.token.value);
setUser(data.userInfo)
resolve();
})
.catch(error => {
reject(error);
});
});
},
// 账号退出登录
logout ({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token)
.then(() => {
removeToken(); // must remove token first
removeUser();
resetRouter();
commit("RESET_STATE");
commit('SET_MENULIST', '') // 清空menulist
resolve();
})
.catch(error => {
reject(error);
});
});
}
export default {
namespaced: true,
state,
mutations,
actions
};
二、在src/store/getters.js文件中添加上角色列表:
const getters = {
menulist: state => state.user.menulist, //角色列表
export default getters
更多推荐
所有评论(0)