如何将来自 Context API 的不记名令牌传递到 useEffect 中的 axios 调用中？

Question

我正在寻求一些有关如何在 useEffect 内部传递不记名令牌的帮助。

我得到的令牌来自上下文，当管理员登录时会更新。

我需要在另一个文档中使用令牌作为承载者，这样我就可以获得需要承载者的 API 响应。

持票人用于授权，确认登录者是管理员。

这是我迄今为止尝试过的。

尽管我仍然收到 401 错误请求，因为承载者未正确传递。

// React
import React, { useContext, useState, useEffect } from "react";

// Axios
import Axios from "axios";

// Contexts
import { LoginDataContext } from "../Contexts/LoginContext";
import { TokenDataContext } from "../Contexts/TokenContext";
import { UserIdDataContext } from "../Contexts/UserIdContext";

// Icons
import { HiArrowNarrowUp, HiArrowNarrowDown} from "react-icons/hi";

const AdminDashboard = () => {
  const { user } = useContext(LoginDataContext);
  const { token } = useContext(TokenDataContext);
  const { userid } = useContext(UserIdDataContext);

const header = {
    'Authorization': `Bearer ${token}`, 
}

  const [Subscriber, SetSubscriber] = useState([]);
  useEffect(() => {
    Axios.get(`http://localhost:4000/api/v1/subscribers`, { header }).then((res) => {
      console.log(res.data);
      SetSubscriber(res.data);
    });
  }, []);

Answer 1

尝试将授权包装在标头对象中

const header = {
    headers: {
      Authorization: `Bearer ${token}`,
    }
}

useEffect(() => {
    Axios.get(`http://localhost:4000/api/v1/subscribers`, header).then((res) => {
      console.log(res.data);
      SetSubscriber(res.data);
    });
  }, []);

Answer 2

如何设置自动传递的令牌而不总是将标头附加到请求中。我知道使用拦截器是有效的，但它不会让应用程序访问令牌，除非刷新后，因为我不知道如何正确地从提供者传递令牌，所以我从本地存储获取令牌