使用 vuex 和 本地存储实现永久性token存在 并且在请求拦截统一添加headers token 避免重复代码

在 vuex 仓库中设置state的token值：从本地中取值：

登录的时候调用唯一可以修改state数据的mutations方法设置token ；

export default new Vuex.Store({
  state: {
    // 分类
    // allCate: [],
    user: getItem("USERTOKEN"),
  },
  getters: {},
  mutations: {
    setUserToken(state, data) {
      state.user = data;
      // 如果是简单数据不需要序列化 因此封装一个函数
      //   localStorage.setItem("USERTOKEN", JSON.stringify(data));
      setItem("USERTOKEN", data);
    },
  },
  //   在action中发起 axios？
  actions: {},
  modules: {},
});

在请求拦截器中判断是否存在token 有的话就给所有的请求携带token，

ps：有的接口不需要tokne参数，也可以添加tokne，因为服务器只会去验证自己需要的参数，其余的参数不会管；

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // console.log(config, "======请求拦截器=========");
    // config 就是接口相关配置 eg headers data等
    // 如果有token就把tokne加入请求参数
    const { user } = store.state;
    // console.log(user);
    if (user && user.token) {
      //   console.log(111);
      config.headers.Authorization = `Bearer ${user.token}`;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);