Axios - 新实例覆盖全局默认值答案

【问题标题】：Axios - New Instance overrides Global DefaultsAxios - 新实例覆盖全局默认值
【发布时间】：2020-06-03 02:04:05
【问题描述】：

关于实现多个 axios 实例的快速问题。

我根据需要在我的移动应用程序中调用我自己的 API。通过检查 Google Signin 或 Facebook Signin 颁发的令牌是否经过身份验证并与预期用户匹配来保护某些 API 端点。其他端点不需要令牌，实际上要求前端根本不发送令牌以继续在后端正确的逻辑路径。

我在前端获取用户令牌时设置了全局 axios 实例。我希望所有 axios 调用都默认包含令牌。为此，我将默认的 Authorization 标头设置为：

import axios from 'axios'

...

axios.defaults.headers.common.Authorization = `Bearer ${fbUserInfo.accessToken}`

此代码在加载的应用程序的初始页面上运行，因此每次我在应用程序的其他地方使用 axios 时，现在都包含令牌。在我继续执行以下步骤之前，它会按预期工作。

为了创建一些不应包含令牌的重复 API 调用，我在我的一个 redux 操作创建器中创建了一个“无令牌”实例。

const axiosTokenlessInstance = axios.create()
...
axiosTokenlessInstance.defaults.headers.common.Authorization = false

当我直接调用它时，这确实覆盖了默认的 axios 设置，但是，当我再次直接调用 axios 时，我意识到它也覆盖了我的默认设置。

我预计这种行为是我仍然可以在其他地方调用 axios.post 或 axios.get 并且它仍然会包含令牌。我弄错了吗，我必须创建一个“标记”实例吗？我不希望这样做，因为我必须在任何地方都明确地检查并替换标记实例，而不仅仅是使用 axios 默认值。谢谢！

【问题讨论】：

我遇到了和你一样的问题。不知道为什么。有人知道为什么吗？

标签： reactjs redux axios

【解决方案1】：

尝试创建一个名为setAuthToken.js 的文件，该文件单独处理身份验证实例。这样，任何时候你需要使用身份验证，你都可以调用这个函数（我什至建议限制调用这个身份验证一次并将令牌保存在用户 localStorage 中）：

import axios from 'axios';

const setAuthToken = token => {
if(token){
    axios.defaults.headers.common['x-auth-token'] = token;
}
else{
  delete axios.defaults.headers.common['x-auth-token'];
}

}

export default setAuthToken;

现在假设您有一个需要身份验证的后端函数调用，您可以这样做：

import setAuthToken from "../utils/setAuthToken";
export const loginUser = (token) => async (dispatch) => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  try {
    const res = await axios.get("/api/auth");
    dispatch({
      type: USER_LOGGED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

【讨论】：

感谢您的回答！这是一个很好的解决方案。实际上我又接近了它，因为我很想知道是否有办法在创建新实例时不覆盖默认设置。

【解决方案2】：

在 axios.create() 中指定空白标头 Authorization 可解决问题，并且不会覆盖全局 axios 标头。

所以这按预期工作：

  const axiosTokenlessInstance = axios.create({
    baseURL: Config.API_HOST,
    headers: { Authorization: '' },
  })

虽然这会覆盖全局 axios 设置，而不仅仅是影响指定的实例：

  const axiosTokenlessInstance = axios.create()
  axiosTokenlessInstance.defaults.headers.common.Authorization = false

【讨论】：