用户登陆获取验证码的时候，前端需要获取验证码图片的reponse的token，然后再将设置成头部返回给后台==自定义图片拦截器

因为需要获取图片的response数据，因为这个不是走的接口，所以在axios的response拦截器里面是获取不到图片的response的token。所以 需要给图片自定义一个ajax，在图片拦截器里面去获取数据。

<template>
<div>
	<el-input v-model="loginForm.code" placeholder="输入验证码"></el-input>
                <img
                  id="codeimg"
                  :tokensrc="getAuthImage_"
                  ref="autoCode"
                  @click="getAuthImage"
                  class="codeget"
                />
</div>
</template>
<script>
Object.defineProperty(Image.prototype, "tokensrc", {
  enumerable: true,
  writable: true,
  configurable: true,
});
data(){
	return{
		getAuthImage_:""
	}
},
created(){
	this.getAuthImage_=this,BASEURL+"/authImage"//注意这里是接口的地址，初始值
}，
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getAuthImage();
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.getAuthImage();
    next();
  },
  beforeRouteLeave(to, from, next) {
    this.getAuthImage();
    next();
  },
}

</script>

图片拦截器

//
methods:{
	getAuthImage(){
		let img = document.getElementById("codeimg");
		let src = img.getAttribute("tokensrc");
		let xml = new XMLHttpRequset();
		xml.responseType = "blob";
		xml.open("get" , src ,true);
		xml.onreadystatechange = function(){
			if(this.readyState = 4 && this.status = 200){
				let token = xml.getResponseHeader("Authorization");
				document.cookie = "Authorization=" + token;
				img.src = URL + createObjectURL(xml.response);
				img.onload = () => {
					URL.revokeObjectURL(img.src);
				}
			}
		}
		xml.send();
	}