vuex处理登录信息以及设置router全局守卫

1.存储登录信息

// 新增state
state: {
    LoginUser: null,
  },
// 新增mutations
mutations: {
    initUser(state, payload) {
      state.LoginUser = payload;
    },
  },

// vue页面调用
// 第一种 直接在函数里commit
this.$store.commit("initUser", res.data.user);
// 第二种使用mapMutations 辅助函数将组件中的methods映射为store.commit调用
// methods
...mapMutations(["initUser"]),
// 在函数里调用
this.initUser("res.data.user");

2.处理页面刷新时vuex数据会全部被清空的情况

利用sessionStorage存储
// 把当前登陆的用户信息存到 sessionStorage里一份
sessionStorage.setItem("LoginUser", JSON.stringify(res.data.user));
// 修改state
state: {
    LoginUser: sessionStorage.getItem("LoginUser")
      ? JSON.parse(sessionStorage.getItem("LoginUser"))
      : null,
  },

3.如果展开运算符报错，可以尝试将.babelrc中的内容转移到babel.config.js中，然后删除.babelrc

4.配合router设置全局守卫控制登录

// 给vuex store设置一个getters
getters: {
    getLoginUser(state) {
      // 获取loginUser内容
      return state.LoginUser;
    },
  },
// 获取对象类型
Object.prototype.toString.call('xxxx')
// 如果报错 Uncaught (in promise) Error: Redirected when going from "/" to "/home" via a navigation guard.
// 处理办法
1.降低vue-router的版本 我降到3.0.7成功处理
2.修改路由报错处理（router->index.js中修改）
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}

5.设置全局守卫控制之前，先写一个处理判断是否是对象的方法

// 新建helper.js
export default {
  getTypes: function (instence) {
    return Object.prototype.toString.call(instence).slice(8, -1);
  },
};
// 在main.js中引入js
import helper from "./lib/helper";
// 使用方法
helper.getTypes(data)  // 如果返回 Object 则说明类型是个对象。

// 设置全局守卫
router.beforeEach((to, from, next) => {
  if (to.path != "/") {
    // 校验用户是否登录
    if (helper.getTypes(store.getters.getLoginUser) === "Object") {
      // 判断是不是一个对象，如果是一个对象，说明有值
      next();
    } else {
      next("/");
    }
  } else {
    next();
  }
});