VueJS 设置 axios 标头持久化答案

【问题标题】：VueJS set axios header persistVueJS 设置 axios 标头持久化
【发布时间】：2019-10-30 17:00:00
【问题描述】：

我遇到了一个问题，我的 vuex 状态只持续网页刷新。一旦网页刷新，vuex store 中的数据就消失了。

为了克服这个问题，我使用了名为 Vuex persistestate 的好插件现在我的 vuex 是持久化的。

但我仍然对 axios 授权标头有疑问。我已经在这样的 axios 登录操作中设置了 auth 标头

actions: {
    login({ commit }, payload) {
      return new Promise((resolve, reject) => {
        try {
          axios.defaults.headers.common.Authorization = payload.token;
          commit('setUser', payload);
          resolve();
        } catch (error) {
          reject();
        }
      });
    },
  },

但是如果我点击刷新按钮，这个 auth headers 值就会变得不确定。我该如何克服这个问题？

【问题讨论】：

尝试将您的标头放入 cookie 中，然后从那里取出

标签： vue.js vuejs2 axios

【解决方案1】：

这是因为在上次会话中您调用了login，它会将令牌保存在您的 axios 实例中。刷新时，标题设置消失了。 Vuex持久化状态只保存你的Vuex，你的令牌不在你的Vuex中。

我在这里使用js-cookie。

// login action
   ...
   axios.defaults.headers.common.Authorization = payload.token;
   Cookies.set('token, payload.token);
   commit('setUser', payload);
   resolve();
   ...

// Put it somewhere in the entry of your application, e.g: `main.js`, `App.vue`.
axios.defaults.headers.common.Authorization = Cookies.get(token);

【讨论】：