img图片鉴权附加token

<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地址
<template><div><!-- 显示图片 --><img ref="img" :style="{width:width,height:height}" v-if="imgType == 'view'" /><!-- 使用element-ui的el-image进行图片预览 --><el-image :style="{width:width,height:height}" ref="previewimg" v-if="imgType == 'preView'" :src="previewpath":preview-src-list="previewList"></el-image></div>
</template><script>import {getToken} from "@/utils/auth";export default {name: 'AuthImg',props: {imgSrc: String,// 图片类型,可选为'view'(仅预览图片)或'preView'(可点击预览)imgType: {type: String,default: "view",},// 图片的宽度width: {type: String,},// 图片的高度height: {type: String,},},data() {return {// 预览图片列表previewList: [],// 预览图片路径previewpath: "",};},computed: {// 拿到token值,登录成功后由后台返回的token() {// 这里我把登录之后拿到的token放到了vuex中return getToken();}},mounted() {},methods: {// 携带token请求img的srcgetImgSrcByToken() {// Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象Object.defineProperty(Image.prototype, 'imgSrc', {// 可写writable: true,// 可枚举enumerable: true,// 若configurable设为false,那就不可以delete了configurable: true});let img = this.$refs.img;let request = new XMLHttpRequest();request.responseType = 'blob';request.open('get', this.imgSrc, true);request.setRequestHeader('Authorization', 'Bearer ' + this.token);request.onreadystatechange(e => {if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {// URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象URL,这个新的URL对象表示指定的File对象或blob对象img.src = URL.createObjectURL(request.response);img.onload = () => {// 在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。URL.revokeObjectURL(img.src);}}});request.send(null);},},
}
</script>
  1. 父组件中调用
<authImg :imgSrc="baseurl + '/download.do?id='+ files.name + '&height=60'" alt=""></authImg>

下面尝试 第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、类型、宽度和高度。

封装文件

<template><div><!-- 显示图片 --><img ref="img" :style="{width:width,height:height}" v-if="imgType == 'view'" /><!-- 使用element-ui的el-image进行图片预览 --><el-image :style="{width:width,height:height}" ref="previewimg" v-if="imgType == 'preView'" :src="previewpath":preview-src-list="previewList"></el-image></div>
</template>
<script>
// 引入的接口文件
import { downloadFileApi } from "@/api/publicApi/enumeration";
export default {name: "token-img",props: {// 图片的URL地址imgUrl: {type: String,},// 图片类型,可选为'view'(仅预览图片)或'preView'(可点击预览)imgType: {type: String,default: "view",},// 图片的宽度width: {type: String,},// 图片的高度height: {type: String,},},data() {return {// 预览图片列表previewList: [],// 预览图片路径previewpath: "",};},methods: {// 查看文件 //仅预览图片viewModel() {const img = this.$refs.img;// 调用下载文件的API并根据返回的文件内容创建URL对象downloadFileApi(this.imgUrl).then((res) => {img.src = URL.createObjectURL(res);img.onload = () => {URL.revokeObjectURL(img.src);};});},//带缩略图预览preViewModel() {downloadFileApi(this.imgUrl).then((res) => {// 调用下载文件的API并根据返回的文件内容创建URL对象this.previewpath = URL.createObjectURL(res);this.previewList.push(this.previewpath);});},},watch: {// 监听imgUrl变化imgUrl() {if (this.imgType == "view") {this.viewModel();} else if (this.imgType == "preView") {this.preViewModel();}},},mounted() {if (this.imgType == "view") {this.viewModel();} else if (this.imgType == "preView") {this.preViewModel();}},
};
</script>
引入的接口文件
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)
使用文件
<TokenImg :width="`50px`" :height="`50px`" :imgUrl="YourUrl" :imgType="`preView`"/>
实现效果

在这里插入图片描述

在这里插入图片描述

渲染查看

在这里插入图片描述

拓展

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/672405.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gartner 2024年十大战略技术趋势解读

最近Gartner发布了2024年十大战略技术趋势报告&#xff0c;这十大技术趋势中有七项是关于AI技术及其技术应用相关。下面我们做一个简单解读。 首先&#xff0c;报告中着重强调了AI信任、风险和安全管理的重要性。企业需要对AI应用实施信任、风险和安全管理&#xff0c;以提高决…

基于FPGA实现ICMP协议(包含源工程文件)

前文对IP协议和ICMP协议格式做了讲解&#xff0c;本文通过FPGA实现ICMP协议&#xff0c;PC端向开发板产生回显请求&#xff0c;FPGA接收到回显请求时&#xff0c;向PC端发出回显应答。为了不去手动绑定开发板的MAC地址和IP地址&#xff0c;还是需要ARP模块。 1、顶层设计 顶层…

基于Java农产品商城系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

计算机毕业设计 基于SpringBoot的城市垃圾分类管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

人工智能专题:量子汇编语言和量子中间表示发展白皮书

今天分享的是人工智能系列深度研究报告&#xff1a;《人工智能专题&#xff1a;量子汇编语言和量子中间表示发展白皮书》。 &#xff08;报告出品方&#xff1a;量子信息网络产业联盟&#xff09; 报告共计&#xff1a;78页 量子计算与量子编程概述 随着社会生产力的发展&am…

laravel distinct查询问题,laravel子查询写法

直接调用后&#xff0c;count查询会和实际查询的数据对不上&#xff0c;count还是查询全部数据&#xff0c;而实际的列表是去重的。 给distinct加上参数&#xff0c;比如去重的值的id&#xff0c;就加id。 另一种写法是使用group by id 子查询。 sql语句&#xff1a; selec…

Java+SpringBoot:构建稳定高效的计算机基础教学平台

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

three.js 向量方向(归一化.normalize)

效果&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div><p><el-button type"primary…

【开源】JAVA+Vue+SpringBoot实现房屋出售出租系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…

前端的事件代理

事件代理是一种编程技巧&#xff0c;它允许我们通过在父元素上监听事件&#xff0c;来处理子元素的事件。这种方式可以减少事件监听器的数量&#xff0c;提高性能。 在前端开发中&#xff0c;事件代理常常用于处理大量的动态元素。例如&#xff0c;在一个列表中&#xff0c;每…

Windows下配置多个账号的git ssh

生成密钥 已经有一个密钥的情况下&#xff0c;用下面的命令生成一个新密钥&#xff0c;注意为了防止原始密钥文件被覆盖&#xff0c;需要给一个新名字&#xff1a; ssh-keygen -t rsa -f C:\\Users\\xxx\\.ssh\\id_rsa_xxx -C "xxxemail.com"给GitHub配置SSH Key …

DAY5.

握手&#xff1a; 第一次握手&#xff1a;客户端发送SYN包给服务器&#xff0c;并进入SYN_SENT状态&#xff0c;等待服务器返回确认包。 第二次握手&#xff1a;服务器接收到SYN包&#xff0c;确认客户端的SYN&#xff0c;发送ACK包&#xff0c;同时发送一个SYN包&#xff0c;…

Android开发--实时监测系统+部署故障诊断算法

0.项目整体思路介绍&#xff1a; 搭建无人装备模拟实验平台&#xff0c;使用采集器对数据进行采集&#xff0c;通过网络通信Udp协议发送到安卓端&#xff0c;安卓端作界面显示&#xff0c;算法使用matlab仿真后&#xff0c;用C语言实现。将采集器采集到的数据经过处理后训练&a…

大规模机器学习简介

1. 非线性回归问题 1.1 问题描述 我们有一组实验数据&#xff0c;每个实验都给出了输入和输出对 (Xn, Yn)。每个输入 是空间中的一个点&#xff0c;每个输出 是 空间中的一个点。这些数据点被假设为独立同分布&#xff08;i.i.d&#xff09;。 我们的目标是找到一个函数 fw&…

蓝桥杯-“山”形数字个数(python版)

问题描述 这天小明正在学数数。 他突然发现有些整数的形状像一座“山”&#xff0c;比123565321、145541&#xff0c;它们左右对称&#xff08;回文&#xff09;且数位上的数字先单调不减&#xff0c;后单调不增。 小朋数了很久也没有数完&#xff0c;他想让你告诉他在区间[202…

Z0423 树的染色2

Description 一个n个节点的树。 现在用k种颜色&#xff0c;给树上的每个节点染色 要求: 任何两个距离不大于2的不同节点被染的颜色不同。 由于答案可能过大&#xff0c;请将其对10^97取模。 Format Input 第一行一个数n,k&#xff0c;含义如题 接下来共有n-1行&#x…

C#(C Sharp)学习笔记_Switch条件判断分支语句【六】

Switch语句 Switch在一些计算机语言中是保留字&#xff0c;其作用大多情况下是进行判断选择。以C语言来说&#xff0c;switch&#xff08;开关语句&#xff09;常和case break default一起使用。 Switch语句就相当于是else if语句&#xff0c;有着很相似的作用&#xff1a;根据…

过年送你三句话!部门大战积雪!飞机延误,掌声响起?——早读

你到家了吗&#xff1f; 引言代码第一篇 也评 以雪为令&#xff0c;多滴部门全力以赴迎战寒潮第二篇 人民日报 飞机延误20分钟&#xff0c;但他走进机舱时&#xff0c;掌声响起&#xff01;第三篇 人民日报 【夜读】快过年了&#xff0c;这三句话送给你第四篇&#xff08;跳&am…

Java基于SpringBoot+Vue的垃圾分类网站的实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

“Nginx”介绍和使用

什么是 Nginx&#xff1f; Nginx&#xff08;发音为“engine-x”&#xff09;是一款开源的、高性能的 HTTP 和反向代理服务器&#xff0c;也是一个 IMAP/POP3 代理服务器。Nginx 由 Igor Sysoev 于 2004 年创建&#xff0c;并在 BSD 许可下发布。 Nginx 的特点 高性能&#…