vue img图片 axios请求携带参数、系统头Header

最近需求要求系统下载图片携带token系统头验证权限，一般的img用src下载是get请求且不经过axios全局配置，会携带不上token。所以不能用img，只能自己写一个图片组件替代img

自己建一个组件 authImg

核心

<template>
  <img ref="img" />
</template>
<script>
export default {
  name: 'authImg',
  props: {
    authSrc: {
      type: String,
      required: false,
      default: ''
    }
  },
  mounted() {
    this.getImg()
  },
  // 方法
  methods: {
    getImg() {
      // 获取需携带的token，看自己系统怎么获取的
      let token = sessionStorage.getItem('token')
      Object.defineProperty(Image.prototype, 'authsrc', {
        writable: true,
        enumerable: true,
        configurable: true
      })
      let img = this.$refs.img
      let request = new XMLHttpRequest()
      request.responseType = 'blob'
      request.open('get', this.authSrc, true)
      // 携带请求头
      request.setRequestHeader('Authorization', token)
      request.onreadystatechange = e => {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
          img.src = URL.createObjectURL(request.response)
          img.onload = () => {
            URL.revokeObjectURL(img.src)
          }
        }
      }
      request.send(null)
    }
  },
  // 监听
  watch: {
    // vue2这里表示父组件是对象属性，子组件不会主动调用，需要深度监听一下调用
    authSrc: {
      deep: true,
      handler(n, o) {
        if (n) {
          this.getImg()
        }
      }
    }
  }
}
</script>

父组件

 

引入authImg，
注册组件
直接替换img
// 原来的
<!--                <img  :src="a.b" />-->
// 现在的；这里的情况，子组件的watch就有用了
<AuthImg  :authSrc="a.b" />