在 axios 配置文件中使用反应钩子答案

【问题标题】：Use react hook inside a axios config file在 axios 配置文件中使用反应钩子
【发布时间】：2021-11-18 23:00:42
【问题描述】：

我有一个 axios 配置文件，我在该文件中调用 react hook {Auth Context}，目的是在反应上下文 api 中获取令牌。但我得到了这样的错误 “React Hook 'useAuth' 不能在顶层调用。必须在 React 函数组件或自定义 React Hook 函数中调用 React Hooks”

AuthContext.js

import React, { useContext, createContext, useState } from "react";

const AuthContext = createContext();

export function useAuth() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [currentToken, setCurrentToken] = useState("");
  const [isAuth, setIsAuth] = useState(false);

  function login(token) {
    setCurrentToken(token);
    setIsAuth(true);
  }

  const value = {
    login,
    currentToken,
    isAuth,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

和我的 axios 配置文件是这样的

AxiosConfig.js

import axios from "axios";
import { useAuth } from "./AuthContext";

const { currentToken } = useAuth(); //my Reeact Context

export default axios.create({
  baseURL: "http://127.0.0.1:8000",
  headers: {
    "Content-type": "application/json",
    Authorization: `Bearer ${currentToken}`,
  },
});

实现该目标的最佳方法是什么？

提前谢谢你

【问题讨论】：

标签： reactjs axios react-hooks

【解决方案1】：

钩子并不打算在组件之外使用，useContext 和 useAuth（使用 useContext）是一个钩子。这是来自 freecodecamp 的引述：

你不能在组件函数之外使用钩子，这只是它们的工作方式。但是，您可以制作钩子的组合。 React 依赖于钩子在组件函数中出现的数量和顺序。所以不要考虑用某种条件逻辑来包装这些调用。

正如您在上面所读到的，您不应该在 React 应用程序中执行此操作。

【讨论】：

【解决方案2】：

您可以创建一个 api 并在需要时设置令牌，因为您的 api 在整个代码中都是相同的，这将起作用。


const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_END_POINT,
});


export const setApiToken = (token: string) => {
  api.defaults.headers.common["Authorization"] = `bearer ${token}`;
};

【讨论】：

【解决方案3】：

正如一些用户指出的那样，您不能在 React 组件之外使用钩子。我在我的项目中有非常相似的设置并将我的 API 密钥存储在本地存储中，这也增加了持久化 API 密钥的好处。

// src/api/index.js

import axios from "axios";
import { API_URL, LOCALSTORAGE_API_KEY } from "../utils/constants";

export const signedRequest = () => {
  const apiKey = localStorage.getItem(LOCALSTORAGE_API_KEY);

  return axios.create({
    baseURL: API_URL,
    headers: apiKey ? { "Authorization": `Bearer: ${apiKey}` } : {},
  });
};

export const unsignedRequest = () => {
  const request = getSignedRequest();
  request.defaults.headers = {};

  return request;
};

用法：

signedRequest().get<AdminDashboard.UsersResponse>("/dashboard");

如果您需要执行不带Authorization 的请求，您可以这样做：

unsignedRequest().get<AdminDashboard.UsersResponse>("/public");

【讨论】：

哇，好的，我明白了