2

我正在使用 nuxt + express 构建一个全栈应用程序，我终于设法在我的前端/后端之间使用护照和 jwt 进行身份验证。

我想向我自己的 github 存储库发出额外的 api 请求以获取最新版本（以便用户获取存在更新的信息）。此请求失败，并显示“凭据错误”消息。我认为这是因为我的 jwt 令牌是随它一起发送的（我可以在请求标头中看到我的令牌）。

我的问题是，是否可以阻止 axios 仅在此调用中发送我的 JWT 令牌？首先，为了使我的请求正常工作，其次，我不希望令牌在外部请求中发送。

例子：

const url = 'https://api.github.com/repos/xxx/releases/latest'
this.$axios.get(url)
    .then((res) => {
        this.latestRelease = res.data
    }).catch((error) => {
        console.error(error)
    })
4

2 回答 2

3

转换请求

您可以通过将选项对象传递给您的获取请求并转换您的请求标头来覆盖Authorization特定调用：

const url = 'https://api.github.com/repos/xxx/releases/latest';
this.$axios.get(url, {
  transformRequest: (data, headers) => {
    delete headers.common['Authorization'];
    return data;
  }
})
.then((res) => {
  this.latestRelease = res.data;
}).catch((error) => {
  console.error(error);
})

正如他们的GitHub 自述文件中所述：

transformRequest允许在将请求数据发送到服务器之前对其进行更改。这仅适用于请求方法“PUT”、“POST”、“PATCH”和“DELETE”。数组中的最后一个函数必须返回字符串或 Buffer、ArrayBuffer、FormData 或 Stream 的实例。 您可以修改标头对象。

创建特定实例

你可以为不同的场景创建一个 axios 的实例。这允许您将需要授权标头的 axios 调用和不需要的 axios 调用分开。每个实例都有自己的“全局”选项：

const axiosGitHub = axios.create({
  baseURL: 'https://api.github.com/',
  timeout: 1000,
  headers: {}
});

// won't include the authorization header!
const data = await axiosGithub.get('repos/xxx/releases/latest');
于 2021-05-31T00:26:37.427 回答
2

您可以使用此答案来拥有多个 axios 实例：https ://stackoverflow.com/a/67720641/8816585

或者你也可以导入一个全新的 axios 并像这样在本地使用它

<script>
import axios from 'axios'

export default {
  methods: {
    async callFakeApi() {
      const result = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
      console.log('result', result)
    },
  }
}
</script>

Thatkookooguy 提到的 Axios 拦截器是另一种解决方案！

于 2021-05-31T00:28:47.290 回答