vue验证码功能问题记录

图形验证码是后端直接生成的url链接，放到img标签的src里就可以显示图形验证码，下面2点需特别注意：
一、刷新验证码
刷新验证码最好在请求链接是加一个随机数，防止缓存

<img class="verifyCode" id="verifyCode" :src="url">

data(){
	return{
		url:''
	}
},
methods:{
	refresh(){
		let num = Math.ceil(Math.random() * 10);//生成一个随机数（防止缓存）
		this.url=this.url+'?'+num
	}
}

二、对获取的验证码进行验证
后端对验证码进行验证的信息存在response header中，如果是直接放在cookie中，则直接将axios设置为
axios.defaults.withCredentials = true

如果是存在自定义的header中，那么需要后端设置过，前端才可利用axios的response.headers获取，因为要获取header信息，所以有可能存在2次请求图片，导致验证码无法验证成功。
解决办法：

<img class="verifyCode" id="verify" src="">

methods:{
	refresh(){
		let num = Math.ceil(Math.random() * 10);//生成一个随机数（防止缓存）
                axios.get(url+'?' + num, {responseType: 'blob'}).then(res => {
                    //需要的header信息可以通过res.headers获取
                    let blob = res.data;
                    let img = document.getElementById("verify");
                    img.onload = function (e) {
                        window.URL.revokeObjectURL(img.src);
                    };
                    img.src = window.URL.createObjectURL(blob)
                })
	}
}

https://www.cnblogs.com/piaoxuewuming/p/10441851.html