如何在 vuejs 中访问具有 Axios 令牌的 API？

Posted 2023-02-22

【中文标题】如何在 vuejs 中访问具有 Axios 令牌的 API？

【英文标题】：how can access to an API which is have a token with Axios in vuejs?

【发布时间】：2021-02-13 16:58:57

【问题描述】：

我有一个包含 JSON 文件的 API，我将使用 Axios 从中获取信息，但它有 Token，我不知道如何使用它有人可以帮助我吗？ 这里是 API

https://api.nytimes.com/svc/movies/v2/reviews/picks.json

我尝试了这个，但它没有工作，并给了我错误 401 和这个 GET https://api.nytimes.com/svc/movies/v2/reviews/picks.json%E2%80%AC%E2%80%AC401（未授权）

<script>
import axios from "axios";
export default 
  data() 
    return ;
  ,
  methods: 
    async getDataFromApi() 
      const res=await axios.get("https://api.nytimes.com/svc/movies/v2/reviews/picks.json‬‬");
      console.log(res.data)
    ,
  ,
;
</script>

请有人帮助我

【问题讨论】：

您是否已注册为开发人员并获得您的 API 密钥/令牌？ developer.nytimes.com/get-started

@johnal 是的，我有令牌

您是否尝试将其添加到查询字符串中？ const res=await axios.get("https://api.nytimes.com/svc/movies/v2/reviews/picks.json‬‬?api-key=YOUR-KEY-HERE");

@johnal 它给了我这个 "fault": "faultstring": "Failed to resolve API Key variable request.queryparam.api-key", "detail": "errorcode": "steps.oauth.v2.FailedToResolveAPIKey"

让我们continue this discussion in chat.

【参考方案1】：

401 错误表示您未通过身份验证。您必须在 axios 授权标头中添加一个令牌并将其与您的 HTTP 请求一起发送。

const res = await axios.get('https://api.nytimes.com/svc/movies/v2/reviews/picks.json', 
  headers: 
    authorization: 'my secret token'
  
);

这是硬编码方式，为了提高效率，你必须定义interceptors，让axios在每个HTTP请求中发送令牌。看到这个：https://gist.github.com/srph/38f67a10e991b6cb2d83