Vue所有图片预加载加上Token请求头信息、图片请求加载鉴权

环境

Vue2、“axios”: “0.18.1”、webpack：“4.46.0”、ant-design-vue: “1.7.8”

描述

项目对安全要求比较高，所有后台返回的图片加载时都要加上token。比如资源图片，拍照打卡的图片，都需要鉴权。如果不带上token参数，图片请求返回都是401，无法正常显示图片。

博客这里仅讨论前端实现。

使用

为了方面理解，先讲怎么使用，再讲具体的代码实现

组件使用

先看看组件方式怎么使用，项目用了 v-viewer 图片预览插件，使用方式：把原先的img标签换成BCTokenImage组件

<viewer ref="viewer">
  <BCTokenImage style="width: 50px;height:40px;" v-for="item in result.images" :src="item.full_url" :key="item.id" />
</viewer>

非组件使用

网上有些方案是指令式的，也有些是querySeletor全局改，大家可以查一查

<img :src="fullUrl" v-token />

从代码实现上来说，逻辑大差不差的。因为需求紧急，img标签全局替换成组件是最快的方式（当然有些base64格式、静态图片会有问题，可以看我另一篇文章：Vue图片父子组件传入路径报错Error: Cannot find module ‘@/assets/map/red.png‘、动态加载require图片失败的问题）

---

实现

第一步，在 src/components 文件新增一个组件：BCTokenImage

位置：src\components\BCTokenImage\index.vue

<template>
  <img :src="imageUrl" :alt="alt" @click="$emit('click')" />
</template>

<script>
import { axios } from '@/utils/http' // 封装过的axios，请求会自带token
import signMd5Utils from '@/utils/encryption/signMd5Utils'

export default {
  name: "BCTokenImage",
  props: {
    src: String,
    alt: String
  },
  data() {
    return {
      imageUrl: "", // 可以默认给一个占位图片
    };
  },
  watch: {
    src: {
      handler(value) {
        this.loadImage(value);
      },
      immediate: true,
    }
  },
  methods: {
    loadImage(url) {
      const sign = signMd5Utils.getSign(url);
      const headers = { 
      // "X-Access-Token": xxxxx, // 封装后axios对象自带了token头
      "X-Sign": sign,   // 签名（看具体需要）
      "X-TIMESTAMP": signMd5Utils.getDateTimeToString(),  // 时间戳（看具体需要）
      };

      axios({
        method: 'get',
        responseType: 'blob', // 重要：设置响应类型为blob
        url,
        headers, // 重要：将签名和时间戳，添加在请求接口 Header
      }).then(response => {
        // 创建一个URL，浏览器可以使用它来加载图片
        this.imageUrl = URL.createObjectURL(new Blob([response]));
      }).catch(error => {
        console.error(`BCTokenImage error: ${url}加载失败！`, error);
      });
    }
  }
};
</script>

主要是看 loadImage 方法的逻辑，因为项目封装了axios对象，默认给请求加上token，所以这个方法的请求头没带上X-Access-Token。

第二步，在 main.js 全局注册组件

import Vue from 'vue'
import BCTokenImage from '@/components/BCTokenImage'

Vue.component('BCTokenImage', BCTokenImage) // 全局注册

当然局部引入也是可以的，具体使用方式请看前面的 《使用》

---

效果

最终效果要看控制台的图片请求头，header成功带上了三个参数，图片请求返回不再是401

感兴趣也可以看看请求的响应内容，返回的是二进制数据

好啦，图片请求鉴权到此结束，谢谢观看，有问题评论区讨论

原文地址：https://blog.csdn.net/qq_44622894/article/details/143873757

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！