vue实现验证码

Vue 实现验证码的方法

使用 Canvas 生成图形验证码

在 Vue 项目中，可以通过 Canvas 绘制图形验证码。创建一个 Vue 组件，利用 Canvas 的 API 绘制随机字符和干扰线。

<template>
  <div>
    <canvas ref="canvas" width="120" height="40" @click="refreshCode"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: ''
    }
  },
  mounted() {
    this.drawCode()
  },
  methods: {
    drawCode() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      // 生成随机字符
      const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      this.code = ''
      for (let i = 0; i < 4; i++) {
        const char = chars.charAt(Math.floor(Math.random() * chars.length))
        this.code += char

        // 绘制字符
        ctx.font = '20px Arial'
        ctx.fillStyle = this.getRandomColor()
        ctx.fillText(char, 10 + i * 25, 25)
      }

      // 绘制干扰线
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.getRandomColor()
        ctx.beginPath()
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
        ctx.stroke()
      }
    },
    getRandomColor() {
      return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
    },
    refreshCode() {
      this.drawCode()
    }
  }
}
</script>

使用第三方库实现验证码

对于更复杂的验证码需求，可以使用第三方库如 vue-captcha 或 v-img-code。

安装 v-img-code:

npm install v-img-code --save

使用示例:

<template>
  <div>
    <v-img-code ref="imgCode" @click="refreshCode"></v-img-code>
  </div>
</template>

<script>
import VImgCode from 'v-img-code'
export default {
  components: {
    VImgCode
  },
  methods: {
    refreshCode() {
      this.$refs.imgCode.refresh()
    },
    validateCode(inputCode) {
      return this.$refs.imgCode.validate(inputCode)
    }
  }
}
</script>

短信/邮箱验证码实现

对于短信或邮箱验证码，需要配合后端服务实现。前端主要处理倒计时和验证逻辑。

<template>
  <div>
    <input v-model="phone" placeholder="请输入手机号">
    <button @click="sendCode" :disabled="counting">{{ countdownText }}</button>
    <input v-model="inputCode" placeholder="请输入验证码">
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      inputCode: '',
      counting: false,
      countdown: 60,
      timer: null
    }
  },
  computed: {
    countdownText() {
      return this.counting ? `${this.countdown}秒后重试` : '获取验证码'
    }
  },
  methods: {
    sendCode() {
      if (!this.phone) {
        alert('请输入手机号')
        return
      }

      // 调用API发送验证码
      this.$axios.post('/api/send-code', { phone: this.phone })
        .then(() => {
          this.startCountdown()
        })
        .catch(error => {
          console.error(error)
        })
    },
    startCountdown() {
      this.counting = true
      this.timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.counting = false
          this.countdown = 60
        } else {
          this.countdown--
        }
      }, 1000)
    },
    validateCode() {
      // 调用API验证验证码
      return this.$axios.post('/api/verify-code', {
        phone: this.phone,
        code: this.inputCode
      })
    }
  }
}
</script>

滑动验证码实现

对于滑动验证码，可以使用 vue-drag-verify 等第三方组件。

安装:

npm install vue-drag-verify --save

使用示例:

<template>
  <div>
    <vue-drag-verify
      ref="dragVerify"
      :isPassing.sync="isPassing"
      text="请按住滑块拖动"
      successText="验证通过"
      handlerIcon="el-icon-d-arrow-right"
      successIcon="el-icon-circle-check"
      @passcallback="handlePass"
    ></vue-drag-verify>
  </div>
</template>

<script>
import VueDragVerify from 'vue-drag-verify'
export default {
  components: {
    VueDragVerify
  },
  data() {
    return {
      isPassing: false
    }
  },
  methods: {
    handlePass() {
      // 验证通过后的逻辑
    },
    reset() {
      this.$refs.dragVerify.reset()
    }
  }
}
</script>

这些方法涵盖了 Vue 中常见的验证码实现方式，可以根据项目需求选择合适的方式。图形验证码适合防止自动化脚本，短信/邮箱验证码适合用户身份验证，滑动验证码则提供了更好的用户体验。