React 为所有请求提供默认身份验证答案

【问题标题】：React provide default authentication for all requestReact 为所有请求提供默认身份验证
【发布时间】：2022-02-04 12:08:06
【问题描述】：

我主要将 React 与 axios 一起使用。我有一个 API 调用拦截器，用于在 JWT 令牌过期时刷新它。

<img src="/media/cache/img.jpg" alt={row.id} width={45} height={45}>

这些也是从服务器加载的，并且需要身份验证。但是当令牌过期并且不需要 API 查询时，这些图片将不会加载，因为令牌无效并且这些图片需要进行身份验证。

即使在这些情况下，我能否以某种方式实现令牌在加载图像之前正确刷新？

【问题讨论】：

图片元素首先如何使用token？它在 cookie 中吗？
是的，令牌存储在 http cookie 中
这可能会对您有所帮助：stackoverflow.com/questions/60532064/…

标签： reactjs axios

【解决方案1】：

您也可以使用 axios 来获取图像。它看起来像这样：

const url = "/media/cache/img.jpg";
const [objectURL, setObjectURL] = useState("");

useEffect(() => {
  axios
    .get(url, {
      responseType: "blob",
    })
    .then((res) => {
      const new_blob = new Blob([res.data], { type: "image/jpg" });
      setObjectURL(URL.createObjectURL(new_blob));
    });
}, []);


<img src={objectURL} alt={row.id} width={45} height={45}>

现在您可以修改它以使用您的“API 调用拦截器”来刷新您的令牌。

【讨论】：