【Vue】图形验证码功能

说明：

1. 图形验证码，本质就是一个请求回来的图片
2. 用户将来输入图形验证码，用于强制人机交互，可以抵御机器自动化攻击 (例如：避免批量请求获取短信)

需求：

1. 动态将请求回来的 base64 图片，解析渲染出来
2. 点击验证码图片盒子，要刷新验证码

1. 准备数据，获取图形验证码后存储图片路径，存储图片唯一标识

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 = base64
    this.picKey = key
  }
}

2. 动态渲染图形验证码，并且点击时要重新刷新验证码

<!-- 顺便将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">