因为需要获取图片的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();
}