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

前言

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

---

实现思路

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、类型、宽度和高度。

---

封装文件

          // 引入的接口文件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();    }  },};

---

引入的接口文件

responseType: "blob" 表示希望以二进制形式接收响应数据。这在处理文件下载或者需要以二进制形式处理响应数据的情况下非常有用。通过将 responseType 设置为 blob，可以确保响应数据以 blob对象的形式返回，然后可以进一步处理或者保存到本地。

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)

---

使用文件

---

实现效果

发起请求

渲染查看

---

拓展

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

封装文件 ---- .js

// 引入服务器请求封装的模块const server = require('../../utils/server.js');Component({  // 组件的内部数据  data: {    previewPath: "", // 预览图片路径  },  // 组件的对外属性，是属性名到属性设置的映射表  properties: {    imgUrl: { // 图片的URL地址      type: null,      observer: 'fetchData' // 监听imgUrl属性的变化，触发fetchData方法    },    imageWidth: { // 图片的宽度      type: String,    },    imageHeight: { // 图片的高度      type: String,    },  },  // 组件的方法，包括事件响应函数和任意的自定义方法  methods: {    // 发起请求获取图片数据    fetchData() {      let {        imgUrl      } = this.properties;      console.log(imgUrl);      if (typeof imgUrl === 'string') {        imgUrl = [imgUrl]; // 如果是字符串，转化为数组      }      // 处理多张图片      const imagePromises = imgUrl.map(url => {        return new Promise((resolve, reject) => {          const imageUrl = `http://192.168.0.6666/${url}`;          server.request({            url: imageUrl,            responseType: 'arraybuffer',            success: (res) => {              const base64 = wx.arrayBufferToBase64(res.data);              resolve(`data:image/png;base64,${base64}`);            },            fail: (error) => {              reject(error);            }          });        });      });      // 处理多张图片的 Promise      Promise.all(imagePromises)        .then(images => {          this.setData({            previewPath: images,          });        })        .catch(error => {          console.error(error);        });    },    // 点击预览图片    previewImageOn(e) {      const {        previewpath      } = e.target.dataset; // 解构获取预览图片URL      wx.previewImage({ // 调用微信预览图片的API        urls: [previewpath], // 需要预览的图片URL列表      });    },  }});

封装文件 ---- .wxml