如何在React useEffect中管理API令牌的使用以进行API调用？

Question

我正在开发一个 ReactJS 项目，我需要进行需要身份验证令牌的 API 调用。目前，每次进行 API 调用时，我都会直接在

useEffect

挂钩中传递令牌。这是我正在做的事情的简化示例：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
const response = await axios.get('https://api.example.com/data', {
          headers: { Authorization: `Bearer ${token}` },
        });
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, [token]); // Dependency array

  return (
    <div>
      {data ? (
        <div>Data: {JSON.stringify(data)}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default MyComponent;

我正在考虑：

• 通过从 cookie 中检索令牌并指定请求的 URL 和正文来创建通用函数来处理 API 调用。

• 抽象令牌检索以避免在每个 API 调用中重复包含令牌。

我的问题：

1. 使用

   useEffect

   和令牌作为依赖项是在 API 调用中管理基于令牌的身份验证的最佳实践吗？

2. 如何改进这种方法，使代码更干净、更易于维护，尤其是在令牌管理方面？

3. React 中是否有我应该考虑的处理身份验证令牌的最佳实践或模式？

Answer 1

好吧，简单来说：

1. 简短的回答：不。会触发不需要的重新渲染，以及一堆你不想要的副作用。以下是如何配置 axios 以在全局范围内使用您的令牌：https://axios-http.com/docs/instance（基本上，您使用特定配置创建一个 axios 实例，将其导出并重新使用因为配置是全局的，所以它无处不在）。
   这是一个演示：https://gist.github.com/wilfreud/27cb79cf50350c834839f636786d7651
2. 代码看起来非常整洁，尽管当涉及到条件渲染时，您所做的方式将使其即使在出现错误的情况下也会渲染“正在加载...”
3. 这里有一组（可以说是）“良好实践”，对于令牌存储，您通常会看到人们使用 localStorage、会话或有时使用 cookie。我建议您根据您的要求进行更多研究。