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

发布于 2025-01-20 17:50:22 字数 208 浏览 1 评论 0 原文

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

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

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

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黑凤梨 2025-01-27 17:50:22

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

使用cookie进行身份验证
的查询参数

使用令牌作为图像URL cookie

当登录时，您可以将cookie发送到浏览器并使用中间件来验证，如果用户有验证允许查看图像。

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')));

令牌

同样，您可以使用像this

“ localhost：5000/uploads/image.png？token = xxxxxxxxxxxxxxxxxx”

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')));

＆lt; img src = 用作用作示例。您必须在任何库中实现此中间件。

You can implement this in one of these ways:

Use Cookies for authentication
Use token as a query parameter for the image URL

Cookies

When login you can send cookies to the browser and use middleware to validate if the user has permission to view the image.

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')));

Token

similarly you can use a token like this

<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')));

Note: This code uses express as an example. You'll have to implement this middleware in whatever Library you are usng.

回复收藏 0 原文

ゞ记忆︶ㄣ 2025-01-27 17:50:22

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

<img id="image"/>

响应被传递到下面的函数

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

using blob you can delay bind the image downloaded from backend API to < img > tag

<img id="image"/>

response from API is passed to below function

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

回复收藏 0 原文

~没有更多了~