使用访问令牌进行身份验证时保护 GET 调用

Question

我的问题不是特定于某种语言或框架，而是与任何使用访问令牌进行身份验证相关。

我有单独的后端和前端服务器（在我的例子中是 NodeJS 和 Vue-3）。 身份验证方法是一种访问令牌 - 用户登录，接收一个访问令牌，并且该令牌随每个请求一起在标头中发送。

我的问题是如何保护 GET 调用，尤其是图像和媒体 html 标签 (

<img src='....'/>

)。

我发现对于使用 axios 执行的“正常”GET 调用，我也可以添加令牌：

axios.interceptors.request.use(function (config) {
    // Retrieve access token which was stored previously 
    const authStore = useAuthStore();
    const accessToken = authStore.accessToken;

    if (!!accessToken) {
        config.headers.Authorization = 'Bearer ' +  accessToken.value;
    }

    return config;
});

在卷曲中看起来像这样：

curl --location 'http://api.mybackendserver.com' \
--header 'Authorization: Bearer XXXXX'

但是，例如当我需要图像时：

<img src="http://api.mybackendserver.com/uploads/xxx">

我有一个问题 - 要么我允许公众访问这些私有文件，要么我无法向用户显示图像（在我的情况下是在文本编辑器中，这使得问题更加复杂）。

我的问题是：
我有什么选择？实施它的最佳实践是什么？

Answer 1

一种选择是使用 POST 方法通过访问令牌进行身份验证。在客户端，您发出 POST 请求以获取您想要从后端返回的图像，然后将其显示在所需的元素上。有多种方法可以处理来自 API 响应的图像文件/数据以将其显示给客户端。研究它们并选择一个最适合您的。