Axios - 防止在外部 api 调用上发送 JWT 令牌

Question

我正在使用 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)
    })

Answer 1

转换请求

您可以通过将选项对象传递给您的获取请求并转换您的请求标头来覆盖特定调用的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 readme：

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

创建特定实例

您可以create an instance of 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');

Answer 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 拦截器是另一种解决方案！