【Vue】图形验证码功能
说明：
- 图形验证码，本质就是一个请求回来的图片
- 用户将来输入图形验证码，用于强制人机交互，可以抵御机器自动化攻击 (例如：避免批量请求获取短信)
需求：
- 动态将请求回来的 base64 图片，解析渲染出来
- 点击验证码图片盒子，要刷新验证码
- 准备数据，获取图形验证码后存储图片路径，存储图片唯一标识
async created () {this.getPicCode()
},
data () {return {picKey: '', // 将来请求传递的图形验证码唯一标识picUrl: '', // 存储请求渲染的图片地址picCode: '' // 用户输入的图形验证码}
},
methods: {// 获取图形验证码// 将方法封装起来：1.更清晰，全写在created里太麻烦了 2.点击盒子需要刷新，刷新又需要重新调async getPicCode () {// 后端可以通过这个key找到验证码图片const { data: { base64, key } } = await request.get('/captcha/image')this.picUrl = base64this.picKey = key}
}
- 动态渲染图形验证码，并且点击时要重新刷新验证码
<!-- 顺便将picCode的v-model绑定一下 -->
<input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
<!-- v-if="picUrl"：有图片的时候才渲染，或者可以给个默认的图片加载失败的图片 -->
<img v-if="picUrl" :src="picUrl" @click="getPicCode">