在 img 标签中显示从 API 到 Next.js 客户端的受保护图像

Question

我正在尝试显示我的 Node.js 后端资产文件夹中的受保护图像。

它有一个中间件来检查用户是否登录并有权访问文件。

在客户端我想在 img 标签中显示图像：

有没有办法拦截这个传递用户令牌的请求，以便他能够访问图像？

谢谢

Answer 1

您可以通过以下方式之一实现：

使用 Cookie 进行身份验证
使用token作为图片的查询参数URL

Cookies

登录时可以向浏览器发送cookies，使用中间件验证用户是否有权限查看图片。

router.use("/uploads", function(req, res, next) {
    // Check if the user is loged in
    if (req.isAuthenticated()) {
    next();
    } else {
        res.status(401).send("You are not authorized to view this page");
    }
});

// Static files
router.use("/uploads", express.static(path.join(__dirname, 'public')));

令牌

类似地，您可以使用这样的令牌

<img src="localhost:5000/uploads/image.png?token=xxxxxxxxxxxxxx" />

router.use("/uploads", function(req, res, next) {
    // Check if the user is loged in
    if (req.query.token && checkToken(req.query.token)) {
        next();
    } else {
        res.status(401).send("You are not authorized to view this page");
    }
});

// Static files
router.use("/uploads", express.static(path.join(__dirname, 'public')));

注意：此代码以express为例。你必须在你使用的任何库中实现这个中间件。

Answer 2

使用 blob 可以延迟将从后端 API 下载的图像绑定到 < img > 标签

<img id="image"/>

来自 API 的响应被传递给下面的函数

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

在 img 标签中显示从 API 到 Next.js 客户端的受保护图像

Show protected image from API to Next.js client in an img tag

node.js

reactjs

multer

next.js