项目需求:登录的时候后台除了返回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
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐