如何使用Vuex将令牌保存在Axios中标头的authifitication中？答案

【问题标题】：How to save the token in the authifitication of the headers in Axios using Vuex?如何使用Vuex将令牌保存在Axios中标头的authifitication中？
【发布时间】：2020-12-09 16:47:16
【问题描述】：

这是登录操作：

Login({ commit }, payload) {
      Axios.post('https://pure-reef-16205.herokuapp.com/api/login', payload)
        .then((response) => {
          // JSON responses are automatically parsed.
          console.log(response);
          commit('setToken', response.data.token);
        });
    },

这是突变：

 state.userToken = userToken;
      localStorage.setItem('Token', userToken);
      Axios.defaults.headers.common.Auth = userToken
    },

没有错误，只是身份验证没有保存在标题中 PS：我尝试了很多方法，我认为这是关于'你无权修改标题'......

【问题讨论】：

标签： vue.js authentication axios http-headers vuex

【解决方案1】：

您可以将@nuxtjs/axios 模块与nuxt 一起使用。这将比自己配置更容易。这是使用该模块的方法。

在您获得令牌后在您的 vuex 操作中尝试 this.$axios.setToken(<idToken>, 'bearer') 和普通身份验证 this.$axios.setToken('<token>')。

Here 是与之相关的文档

【讨论】：

所以我也必须上传 nuxtjs.... 更复杂

【解决方案2】：

您不应该在您的应用程序中使用 javascript 接触任何令牌或 cookie。

如果您可以使用 javscript 读取/写入任何 cookie/令牌，那么您的应用程序可能会受到 XSS 攻击

使用axios.withCredentials = true 进行身份验证

【讨论】：