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;

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

我该如何解决？

Answer 1

Axios get()请求接受两个参数。因此，您可以在网址旁边添加JWT。

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

在您的情况下，yourConfig可能是这样的

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

您还可以在https://github.com/axios/axios上了解有关可在配置中添加的内容。只需搜索“请求配置”

Answer 2

这对我有用，请尝试--

let JWTToken = 'xxyyzz';
 axios
    .get(this.BASE_URL + '/profile/me', { headers: {"Authorization" : `Bearer ${JWTToken}`} })
    .then(res => {
       this.profile = res.data;
       console.log('profile is:', res.data);
      })
      .catch(error => console.log(error))

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

2 个答案: