探索前端图片如何携带token进行验证

前言

图片在前端开发中扮演了重要的角色，它们不仅仅是美观的元素，还可以传递信息和激发用户的兴趣。随着应用场景的增多，前端开发人员就需要在图片加载过程中携带验证的信息。如 token，用于身份验证、权限控制等方面。通过在图片的 URL 或请求头中携带 token 信息，从而实现图片信息的安全传输。

实现思路

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

封装文件

<template><div><!-- 显示图片 --><imgref="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";exportdefault{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();}elseif(this.imgType =="preView"){this.preViewModel();}},},mounted(){if(this.imgType =="view"){this.viewModel();}elseif(this.imgType =="preView"){this.preViewModel();}},};</script>

引入的接口文件

exportfunctiondownloadFileApi(imgUrl){returnrequest({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`"/>

实现效果

发起请求

渲染查看

拓展

一、微信小程序中实现该操作

**封装文件 ----

.js

**

// 引入服务器请求封装的模块const server =require('../../utils/server.js');Component({// 组件的内部数据data:{previewPath:"",// 预览图片路径},// 组件的对外属性，是属性名到属性设置的映射表properties:{imgUrl:{// 图片的URL地址type: String,},imageWidth:{// 图片的宽度type: String,},imageHeight:{// 图片的高度type: String,},},// 组件的生命周期函数lifetimes:{attached(){// 组件实例进入页面节点树时执行this.fetchData();// 调用数据处理方法},},// 组件的方法，包括事件响应函数和任意的自定义方法methods:{// 发起请求获取图片数据fetchData(){const{ imgUrl }=this.properties;// 解构获取图片URLconst url =`http://192.168.0.11:8888/api/api-file/file/downloadFile/file-fld/${imgUrl}`;// 拼接请求URL
      server.request({
        url,// 请求图片的URLresponseType:'arraybuffer',// 响应类型为数组缓冲区success:(res)=>{// 请求成功的回调函数const base64 = wx.arrayBufferToBase64(res.data);// 将数组缓冲区转换为base64编码const imageUrl =`data:image/png;base64,${base64}`;// 拼接base64编码的图片URLthis.setData({// 更新组件的数据previewPath: imageUrl
          });}});},// 点击预览图片previewImageOn(e){const{ previewpath }= e.target.dataset;// 解构获取预览图片URL
      wx.previewImage({// 调用微信预览图片的APIurls:[previewpath],// 需要预览的图片URL列表});},}});

**封装文件 ----

.wxml

**

<view><!-- 使用小程序的image组件进行图片预览 --><imagebindtap="previewImageOn"data-previewPath="{{previewPath}}"src="{{previewPath}}"mode="aspectFill"style="width:{{imageWidth}};height:{{imageHeight}};"/></view>

**

app.json

全局引入**

"usingComponents":{"token-img":"./components/tokenImg/tokenImg"},

**

page.json

全局引入**

{"usingComponents":{"token-img":"./components/tokenImg/tokenImg"}}

使用文件

<view><token-imgimageWidth="100%"imageHeight="180rpx"imgUrl="{{YourUrl}}"></token-img></view>

实现效果

二、下载文件携带 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);});}

**第二种方式：使用插件（

file-saver

）**

file-saver 是一个

JavaScript

库，用于在浏览器中保存文件。它提供了一种简单的方法来生成并保存文件，而不需要服务器参与。使用

file-saver

插件，你可以轻松地在前端生成和下载文件，无需发送文件请求到服务器和返回文件链接，大大简化了文件下载的过程。

file-saver

插件的主要功能是将通过

Blob

对象生成的文件下载链接保存到浏览器的下载路径中。它提供了以下几种方法：

**1.

saveAs

方法**

保存文件到本地。你可以使用

saveAs

方法来指定文件的内容和名称，然后将其保存到浏览器的下载路径。

**2.

save

方法**

保存文件到本地，与

saveAs

方法类似，但不会弹出文件保存对话框。

**3.

createObjectURL

方法**

创建

Blob

对象的

URL

。通过

createObjectURL

方法，你可以将

Blob

对象转换为可供下载的

URL

。

**4.

revokeObjectURL

方法**

释放之前创建的

URL

。一旦文件下载完成，你可以使用

revokeObjectURL

方法来释放已经创建的

URL

，以释放浏览器资源。

• 安装npm install file-saver
• 引入import{ saveAs }from'file-saver';
• 使用// res 返回地址saveAs(res,'报表管理.xls');