在反应原生应用程序中使用 axios 实例中的 API 令牌答案

【问题标题】：Use API token in axios instance in react native app在反应原生应用程序中使用 axios 实例中的 API 令牌
【发布时间】：2021-04-09 20:01:33
【问题描述】：

我正在尝试创建一个可以在整个应用程序中使用的 axios 实例。我使用 Vuex 商店在 Vue 中使用了相同的模式，但不确定如何在 React 中执行此操作。我有一个用于 AuthContext 的 AuthProvider，并且想在创建 axios 实例时使用 useContext，但我收到一个错误，即我无法在组件之外使用 useContext。

实现这一目标的最佳方法是什么？我在 AuthContext 中有我想使用的用户和注销功能，但这种模式可能不适合 React。

import React, { useContext } from "react";
import axios from 'axios'
import { AuthContext } from "./AuthProvider";
import { getEnvironment } from "./environment";
const env = getEnvironment();

const { user, logout } = useContext(AuthContext);

const instance = axios.create();

instance.defaults.baseURL = env.apiUrl;

instance.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;

instance.interceptors.response.use(function (response) {
  return response
}, function (error) {
  if (typeof error.response === 'undefined' || [401, 419].includes(error.response.status)) {
    logout();
  }
  return Promise.reject(error)
})

export default instance;

【问题讨论】：

标签： reactjs react-native axios

【解决方案1】：

我认为，如果您想从另一个上下文中耦合一些状态和回调，那么您还需要创建另一个上下文和您自己的 axios 实例提供程序。

import React, { createContext, useEffect, useContext } from "react";
import axios from 'axios'
import { AuthContext } from "./AuthProvider";
import { getEnvironment } from "./environment";

const env = getEnvironment();

const instance = axios.create(); // <-- create axios instance
instance.defaults.baseURL = env.apiUrl;

export const AxiosContext = createContext(null); // <-- export axios context

const AxiosProvider = ({ children }) => {
  const { user, logout } = useContext(AuthContext); // <-- get state/callback

  // Use an effect to updated the auth context dependent details
  useEffect(() => {
    instance.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;
    instance.interceptors.response.use(function (response) {
      return response
    }, function (error) {
      if (typeof error.response === 'undefined' || [401, 419].includes(error.response.status)) {
        logout();
      }
      return Promise.reject(error);
    });
  }, [user.token, logout]);
  

  return (
    <AxiosContext.Provider value={instance}> // <-- context value is instance
      {children}
    </AxiosContext.Provider>
  );
}

export default AxiosProvider; // <-- export the provider not the instance

要使用，只需确保 AxiosProvider 包装您的应用程序，但在 auth 提供程序中。使用AxiosContext访问axios实例。

import { AxiosContext } from '../path/to/axios/instance";

...

const axiosInstance = useContext(AxiosContext);

...

【讨论】：

感谢您的帮助。