Question

我正在使用Vue与Drupal网站上的外部API进行交互，但是为了每个Drupal用户动态地进行交互，我需要首先从Drupal获得令牌。为此，我正在尝试执行两个GET请求。第一个让我从Drupal中获得了一个承载令牌，第二个使用它来认证第三方API请求。

下面是我要尝试的内容–我能够在第一个请求的响应中成功获取令牌，但是当我尝试在第二个请求的标头中使用令牌时却无法成功。如果我尝试对控制台日志中看到的令牌进行硬编码，那么它确实可以工作，因此我不知道这是问题所在。只是第二个请求标头中的this.jwt['data']['token']似乎没有拉回令牌。

要从第一个响应访问令牌作为第二个请求的标头的一部分，我需要调整什么？

created() {
    axios
    .get('/jwt/token')
    .then(response => {
        this.jwt = response
        console.log(this.jwt['data']['token']) // this does show what I want to access later
    })
},
mounted() {
    axios
    .get('/comment/doc/' + this.id, {
        headers: { Authorization: "Bearer " + this.jwt['data']['token'] } // ...but this doesn't work
    })
    .then(response => {
        this.comments = response
    })
},

Answer 1

在组件安装时，可能尚未完成对令牌请求的响应，此时尚未分配this.jwt。

我将令牌请求移到mounted钩子中，仅在令牌请求成功后才获取注释：

export default {
  mounted() {
    axios
      .get('/jwt/token')
      .then(tokenResp => {
        this.jwt = tokenResp

        axios
          .get('/comment/doc/' + this.id, {
            headers: { Authorization: 'Bearer ' + this.jwt['data']['token'] }
          })
          .then(commentsResp => {
            this.comments = commentsResp
          })
      })
  }
}

访问另一个GET请求中的响应

1 个答案: