阿里云滑块图形验证码2.0 vue对接和问题处理

阿里云滑块图形验证码2.0 vue对接

官方提供了相关对接方法和vue版的对接方案(官网地址)，

按照以上方式很快就能对接完成。

遇到的问题

这个滑块图形验证码，有一个很重要的额问题，就是和后端校验接口的时候会出现captchaKeyId: null的情况，经过分析，找到了原因。

方案一：问题1 如果在同一浏览器tab下，多次操作报错

或者阿里云的token过期之后(10分钟有效)，在此唤起图形验证码就会出现如上情况captchaKeyId: null，图形验证校验始终失败，即使刷新也无法解决，需要重新切换浏览器tab重新执行才可以。
导致以上问题的原因是：图形验证码会给我们浏览器注入cookie,为了安全，这个cookie会根据当前浏览器生成deviceToken来保证当前操作是唯一的。这样就出现captchaKeyId为空的情况。

方案二: 就是动态插入script的方法,多次操作问题较多。

可能有人感觉直接在html页面中引入这个https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js不优雅，可能采用dom动态插入script标签的做法去实现(新插入script时需要把之前的清除掉然会重复插入很多)，这个方法同样会出现上述问题，而且更严重，会导致即