我应该如何在axios GET请求中发送JWT令牌？

Question

我是Vue.js的新手，想在组件中向受限api请求：

  computed: {
    token () {
      return this.$store.getters.getToken; 
    },
   ...

created () {
         axios
        .get( this.BASE_URL + '/profile/me')
        .then( res => {
                    this.profile = res.data;
                    console.log('profile is:', res.data);

          })
          .catch(error => console.log(error))            
    },

问题是我不知道如何将令牌包括在请求标头中。因此，毫不奇怪，我会得到401错误响应。

当我尝试

axios.defaults.headers.common['Authorization'] = this.token;

在收到get请求之前，OPTIONS /profile/me而不是GET /profile/me在服务器日志中。

我该如何解决？

Answer 1

Axios get()请求接受两个参数。因此，在url旁边，您还可以将JWT放入其中。

axios.get(yourURL, yourConfig)
.then(...)

在你的情况下yourConfig可能是这样的

yourConfig = {
   headers: {
      Authorization: "Bearer " + yourJWTToken
   }
}

您也可以在https://github.com/axios/axios上阅读有关可放入配置中的内容的信息。只需搜索“请求配置”