img图片鉴权附加token

前言 vue中给img的src添加token

因项目中安全测评的需要，请求图片时要求添加token，方法如下：

在项目中循环渲染的img标签中的图片要显示，src需要加请求头token（正常情况下，后端直接返回src的url）
图片在前端开发中扮演了重要的角色，它们不仅仅是美观的元素，还可以传递信息和激发用户的兴趣。随着应用场景的增多，前端开发人员就需要在图片加载过程中携带验证的信息。如 token，用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息，从而实现图片信息的安全传输。

实现思路

• 1、在img 请求图片时要求添加token：src 后 url?token=‘’ 拼接， 或通过设置在请求头里，可以使用XMLHttpRequest
• 2、间接通过一个后端api 下载文件到本地

尝试 第1方案

vue中给img的src添加token

1. 自定义子组件AuthImg，在这发送请求，获取img地址

2. 父组件中调用

下面尝试 第2方法：

1. 创建一个名为 tokenImg 的组件，该组件用于显示图片并支持预览功能；
2. 在组件的模板中，使用 标签来显示图片，或使用 element-ui 的 标签进行图片预览；
3. 在组件的属性中，接收图片的 URL 地址 (imgUrl)、图片类型 (imgType)、图片的宽度 (width) 和高度 (height)；
4. 在组件的数据中，定义预览图片列表 (previewList) 和预览图片路径 (previewpath)
5. 实现两个方法 viewModel() 和 preViewModel() 分别用于仅预览图片和带缩略图预览；
6. 在 viewModel() 方法中，通过调用下载文件的 API (downloadFileApi) 并根据返回的文件内容创建 URL 对象，将图片 URL 赋值给 标签的 src 属性；
7. 在 preViewModel() 方法中，同样调用下载文件的 API，将返回的文件内容创建 URL 对象，并将 URL 添加到预览图片列表中；
8. 使用 watch 监听 imgUrl 属性的变化，在变化时根据 imgType 属性的值来调用对应的方法；
9. 在组件的 mounted() 钩子中，根据初始的 imgType 属性值来调用对应的方法；
10. 在 main.js 文件中将 tokenImg 组件注册为全局组件，以便在其他地方使用；
11. 在需要使用该组件的地方，使用 标签，并传递相应的属性（如图片 URL、图片类型、宽度和高度）；
    这样，你可以在前端中使用 tokenImg 组件来显示带有 Token 的图片，并支持预览功能。注意确保在组件使用时传递正确的图片 URL、类型、宽度和高度。

封装文件

引入的接口文件
export function downloadFileApi(imgUrl) {
  return request({
    url: "/api/file/examine-preview"+imgUrl,
    method: "get",
    responseType: "blob",
  });
}

main.js

// 将其注册为全局组件
import TokenImg from "@/components/tokenImg";
Vue.component('TokenImg', TokenImg)

使用文件

实现效果

渲染查看

拓展

下载文件携带 token
第一种方式：手写实现

//下载方法
getBgdzByGcsj(row) {
  // 通过接口下载文件
  downloadFileApiDown(row.bgdz).then((res) => {
    // 将文件流转换为下载链接
    const downloadUrl = URL.createObjectURL(res);
    // 创建一个标签
    const link = document.createElement("a");
    // 设置链接的URL为下载链接
    link.href = downloadUrl;
    // 设置下载的文件名为"报表管理.xls"
    link.download = "报表管理.xls";
    // 隐藏标签
    link.style.display = "none";
    // 将标签添加到页面的中
    document.body.appendChild(link);
    // 触发标签的点击事件，开始下载
    link.click();
    // 下载完成后删除标签
    document.body.removeChild(link);
  });
}