手动实现img图片自定义请求方法

应用场景

在项目使用token的情况下，需要对项目内图片请求也带上token进行鉴权，这时就需要手动实现请求替代原有默认的图片请求

实现思路

自定义一个图片鉴权组件替代原生img标签，传入src时对这个src发请求，自定义请求头（带上token），获取到响应内容（图片数据）后将数据放到自定义组件的img标签中，以实现自定义的鉴权图片

代码实现

自定义ImgToken组件

ImgToken.vue

<template>
  <img ref="img">
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  watch: {
    // 传入src就发请求
    src: {
      handler (n) {
        if (n) {
          this.getImage(n)
        }
      },
      immediate: true
    }
  },
  methods: {
    getImage (url) {
      let that = this
      that.$nextTick(() => {
        // ajax发请求
        let request = new XMLHttpRequest()
        request.responseType = 'blob'
        request.open('get', url, true)
        // 添加自定义请求头
        request.setRequestHeader('Authorization', localStorage.getItem('login_token'))
        request.onreadystatechange = e => {
          if (request.readyState == XMLHttpRequest.DONE) {
            const u = URL.createObjectURL(request.response)
            // 填充img图片
            that.$refs.img.src = u
            that.$refs.img.onload = () => {
              that.$refs.img && URL.revokeObjectURL(that.$refs.img.src)
            }
          }
        }
        request.send(null)
      })
    }
  }
}
</script>

注册全局组件

在main.js中注册ImgToken为全局组件

import AuthImg from './components/ImgToken.vue'
​
Vue.component('AuthImg', AuthImg)

替换使用自定义图片组件

替代原有的img标签为自定义图片组件

<!-- <img :src="frontIdCardImg" /> -->
<AuthImg :src="frontIdCardImg" />