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

Question

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

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

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

即使在这些情况下，我也能在加载图像之前正确刷新令牌吗？

Answer 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调用的拦截器"；刷新您的代币。