前端生成并校验验证码的组件封装

背景：我们是一家toB的人工智能企业，交付给用户的dashboard的注册入口并不对外开放，而且dashboard只做展示，因此需要考虑的安全性问题并没有toC的企业多。然而这次收到的需求方需要在我们修改密码，进行邮箱验证前做一个验证码的校验，其实这个于我们来说就是脱了裤子放屁，多此一举的事。

为了减少后台的工作量，我们决定作弊。如果你是一家toC企业，这个方法可能不可取。因为这是一个完全前端生成并在前端完成校验的模拟图片验证码。

原理非常简单，就是随机生成一组数，与用户输入后进行对比，非常简单就是一个小demo，直接贴代码了

效果如图：

image.png

本来打算用canvas做这个事，但又觉得花花绿绿的背景色，跟一些障碍物看起来比较low，又影响美感，而且还得重温canvas(这个才是真话)，所以我就做了一个实际上并不是图片的图片验证码。

// AuthenticationCode.vue
<template>
  <input
    type="button"
    id="authentication-code"
    v-model="authenticationCode"
    @click="createCode"
  >
</template>

<script>
export default {
  data() {
    return {
      authenticationCode: ''
    }
  },
  props: {
    // 可以传入任意长度
    codeLength: {
      type: Number,
      default: 4
    }
  },
  methods: {
    createCode() {
      let code = ''
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z')

      for (var i = 0; i < this.codeLength; i++) {
        var index = Math.floor(Math.random() * random.length)
        code += random[index]
      }
      this.authenticationCode = code
    },
    validateCode(userVal) {
      return new Promise((resolve, reject) => {
        if (userVal.toUpperCase() === this.authenticationCode.toUpperCase()) {
          resolve('success')
        } else {
          this.createCode()
          reject('error')
        }
      })
    }
  },
  mounted() {
    this.createCode()
  }
}
</script>

<style lang="less" scoped>
#authentication-code {
  font-size: 18px;
  letter-spacing: 5px;
  color: #053d84;
  width: 80px;
  background: #f2f2f5;
  outline: none;
}
</style>

使用的时候引入即可

<template>
  <div class="outline">
    <input v-model="userCode" class="user-code" />
    <authentication-code ref="auth-code" class="authentication-code"></authentication-code>

    <el-button type="primary" @click="handlePostCode" size="mini" class="login-button">登录</el-button>
  </div>

</template>

<script>
import AuthenticationCode from '~/components/AuthenticationCode'
export default {
  data() {
    return {
      userCode: ''
    }
  },
  components: {
    AuthenticationCode
  },
  methods: {
    async handlePostCode() {
      try {
        // 此处做校验
        await this.$refs['auth-code'].validateCode(this.userCode)
        ...
      } catch (err) {
        // 验证码错误
        this.$message.error('验证码输入错误')
      }
    }
  }
}
</script>