reactjs - 在自定义 React hook 中使用 axios

Question

我想创建一个带有拦截器的全局 axios 实例，该拦截器添加带有访问 token 的 header 。访问 token 存储在 cookie 中，但我不知道如何访问拦截器内的 cookie，因为它不是 react 组件。

我尝试在自定义 Hook 中创建 axios 实例，如下所示:

import React, { useEffect, useState } from "react";
import { useCookies } from "react-cookie";
import axios from "axios";

function useApiClient() {
  const [cookies, setCookie] = useCookies(["token"]);
  const [client, setClient] = useState(null);

  useEffect(() => {
    setClient(
      axios
        .create({
          baseURL: "http://localhost:8080/api/",
          responseType: "json",
        })
        .interceptors.request.use(
          (config) => {
            console.log("setting up");
            if (cookies["token"] != null) {
              config.headers.authorization = cookies["token"];
            }
          },
          (error) => Promise.reject(error)
        )
    );
  }, [client]);

  return client;
}

export default useApiClient;

但是当我尝试使用以下方式调用它时:

const client = useApiClient();

function attemptLogin() {
    const credentials = {
      username: username,
      password: password,
    };

    client
      .post("/authenticate", JSON.stringify(credentials), {
         headers: {
          "Content-Type": "application/json",
         },
       }).then(....)

我收到以下错误:

TypeError: client.post is not a function

有人可以帮忙吗？

Answer 1

问题是您正在尝试使用 react-cookie ，它提供了在组件中使用 cookie 的 api。对于某些情况可能没问题，但对于需要检查每个请求的 cookie 的情况，它会强制将 axios 实例放置在组件层次结构顶部的某个位置，并且也会使使用该实例变得更加困难超出组件(很可能您会将实例传递给外部函数)。

我的建议是在单独的模块中创建一个实例，并使用不同的工具来获取 cookie，例如 universal-cookie .

// apiClient.js
import axios from "axios";
import Cookies from "universal-cookie";

const cookies = new Cookies();

export const apiClient = axios
  .create({
    baseURL: "http://localhost:8080/api/",
    responseType: "json"
  })
  .interceptors.request.use(
    config => {
      console.log("setting up");
      const token = cookies.get("token");
      if (token != null) {
        config.headers.authorization = token;
      }
    },
    error => Promise.reject(error)
  );

之后，您可以在应用程序中的任何地方使用该实例

import React from 'react';
import { apiClient } from "./apiClient";

export default ({ name }) => {
  useEffect(() => {
    apiClient.get(/*...*/).then(/*...*/);
  });

  return <h1>Hello {name}!</h1>;
}

如果您更喜欢坚持使用钩子(Hook)，您可以轻松地将客户端包装到其中:

// apiClient.js
export function useApiClient() { return apiClient; } 

Playgroung with full example