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

Question

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

实现这一目标的最佳方法是什么？ 我在我想使用的 AuthContext 中有用户和注销 function，但这种模式可能不适合 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;

Answer 1

我认为如果你想结合一些 state 和来自另一个上下文的回调，那么你需要创建另一个上下文和你自己的 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);

...