关于开发中登录,退出,登录时还要动态获取侧边栏(后台根据不同角色的权限返回不同的侧边栏)

156 阅读1分钟

1.登录

当用户登录发起请求,
要把用户的信息存储到vuex,但是vuex的数据刷新了会初始化成初始值,需要利用本地存储
初始值:这里要解释下,如果你给state里的一个 userInfo :1 那么它初始值就是1 刷新了 还是有的,并不是丢失,因为之前我以为它是会没有,那如果你给它为null,那初始值就是null,刷新后会是null, 所有在vuex中 为啥
userInfo是本地获取,因为之前在mutations里已经本地存储了。
 getCurrentUser().then((res) => {
            this.$store.commit("SET_MENU_LIST", null); //这里应该是清除之前登录用户菜单数据
            this.$store.dispatch("setUserInfo", res.data); //请求成功 保存在vuex
            this.$router.push("/");
          });



2.vuex代码

 state: {
    userInfo: storage.getItem("userInfo"),
    menuList: null,
  },
  actions: {
    setUserInfo({ commit }, data) {
      commit("SET_USER_INFO", data);
    },
    setMenuList({ commit }, data) {
      commit("SET_MENU_LIST", data);
    },
    logout({ commit }) {   //退出发送logout(axios)请求,请求成功触发mutations里的退出
      logout().then(() => {
        commit("LOGOUT");
      });
    },
  },
  mutations: {
    SET_USER_INFO(state, data) {
      state.userInfo = data;
      storage.setItem("userInfo", data);
    },
    SET_MENU_LIST(state, data) {
      state.menuList = data;
    },
    LOGOUT(state) {
      state.userInfo = "";
      storage.removeItem();
      router.push("/login");
    },
  },
  getters: {
    userInfo: (state) => {
     let info = state.userInfo;
      if (info && info.myExpireTime < Date.now()) return null;
      return info;},
    menuList: (state) => state.menuList,
  },
});