时间戳

首页 > 解决方案 > 在 html 上请求图像时，如何处理基于不记名令牌的身份验证？

html - 在 html 上请求图像时，如何处理基于不记名令牌的身份验证？

问题描述

我希望只为经过身份验证的用户下载 html 上的图像。因此，例如，我编写了以下代码。

[客户端]

<img src="/image/showWorkImg?fileName=ed296da987c8ab75c42dce07e.jpg" alt="undefined" style="float:left;height: auto;width: auto"/>

[图像控制器]

class ImageController extends Controller
{
    public function showWorkImg(Request $request)
    {
        try {
            $fileFullName = config('app.image_path') . '/' . $request->fileName;

            return \Image::make($fileFullName)->response();

        } catch (\Exception $e) {
            return "";
        }

    }
}

毫无疑问，身份验证过程位于客户端和 ImageController 之间的中间件上。但是，如您所知，图像 html 标记无法发送带有基于标头的令牌的请求。它仅使用 cookie 发送请求。所以我决定像这样将标头身份验证令牌与 cookie 身份验证令牌同步。

[客户端]


localStorage.setItem(keyName, response.data.token);
cookies.set(keyName, response.data.token, {path: '/'});

在此处输入图像描述

我想知道这种策略是否没有问题。

标签： htmllaraveloauth-2.0tokensingle-page-application

解决方案

一种选择是添加端点GET /image/show-work-image/{fileName}。如果找到 fileName 并且用户已通过身份验证，此端点将返回图像。

您可以使用 ajax 获取图像并将其呈现在页面上。有关更多信息，请参阅带有要传递的标头参数的 Img src 路径

推荐阅读