vue页面实现验证码的实现，无需传递到后台。

  验证码的实现不仅可以在后端实现，纯前端也是可以验证的，但是相比之下这样的方式安全性较低。（参考了其他大佬博客，但是都不全，进行梳理一个完整且可以使用的验证码，vue页面为例）

先看一下效果（步骤有点多，但是为了更详细展示）

      1.在components包下新建common文件夹====》SIdentify.vue组件

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
export default {
  name: 'SIdentify',
  props: {
    identifyCode: {
      type: String,
      default: '1234'
    },
    fontSizeMin: {
      type: Number,
      default: 25
    },
    fontSizeMax: {
      type: Number,
      default: 30
    },
    backgroundColorMin: {
      type: Number,
      default: 255
    },
    backgroundColorMax: {
      type: Number,
      default: 255
    },
    colorMin: {
      type: Number,
      default: 0
    },
    colorMax: {
      type: Number,
      default: 160
    },
    lineColorMin: {
      type: Number,
      default: 100
    },
    lineColorMax: {
      type: Number,
      default: 255
    },
    dotColorMin: {
      type: Number,
      default: 0
    },
    dotColorMax: {
      type: Number,
      default: 255
    },
    contentWidth: {
      type: Number,
      default: 112
    },
    contentHeight: {
      type: Number,
      default: 31
    }
  },
  methods: {
    // 生成一个随机数
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机的颜色
    randomColor (min, max) {
      let r = this.randomNum(min, max)
      let g = this.randomNum(min, max)
      let b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    drawPic () {
      let canvas = document.getElementById('s-canvas')
      let ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      // 绘制背景
      ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
      // 绘制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i)
      }
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
    drawText (ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-45, 45)
      // 修改坐标原点和旋转角度
      ctx.translate(x, y)
      ctx.rotate(deg * Math.PI / 180)
      ctx.fillText(txt, 0, 0)
      // 恢复坐标原点和旋转角度
      ctx.rotate(-deg * Math.PI / 180)
      ctx.translate(-x, -y)
    },
    drawLine (ctx) {
      // 绘制干扰线
      for (let i = 0; i < 5; i++) {
        ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
        ctx.stroke()
      }
    },
    drawDot (ctx) {
      // 绘制干扰点
      for (let i = 0; i < 80; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
        ctx.fill()
      }
    }
  },
  watch: {
    identifyCode () {
      this.drawPic()
    }
  },
  mounted () {
    this.drawPic()
  }
}
</script>
<style scoped>
  .s-canvas {
    height: 38px;

  }
  .s-canvas canvas{
    margin-top: 1px;
    margin-left: 8px;
  }
</style>

 

2. 在登录页引用（你想要操作的页面）

import SIdentify from '@/components/common/SIdentify'

//注册组件
components: {SIdentify}

还有

 mounted () {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  }

 

3.登录表单页面样式

 <el-form-item prop="code">
      <el-row :span="24">
        <el-col :span="12">
          <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" size=""
                    @keyup.enter.native="loginForm('loginForm')"></el-input>
        </el-col>
        <el-col :span="12">
          <div class="login-code" @click="refreshCode">
            <!--验证码组件-->
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-col>
      </el-row>
    </el-form-item>

 

4.在你提交表单里面加上 code 属性

return {
      identifyCodes: '1234567890',
      identifyCode: '',
      // text 输入框验证码
      loginForm: {
        loginName: '',
        loginPwd: '',
        code: ''
      },
      rules: {
        loginName: [{required: true, message: '账号不能为空', trigger: 'blur'}],
        loginPwd: [{validator: check, trigger: 'blur'}],
        code: [{required: true, message: '请填写验证码', trigger: 'blur'}]
      },
      // 响应结果
      responseResult: []
    }

 

5.下面是方法

 // 验证码
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        // eslint-disable-next-line standard/computed-property-even-spacing
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    },
    // 验证
    handleLohin (loginForm) {
      if (this.loginForm.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message({
          message: '验证码错误',
          duration: 2000,
          type: 'waring'
        })
        this.refreshCode()
        return
      }
      this.login(loginForm)  //验证码通过 调用自己登录方法
    },

 

6.在提交登录表单先调用 handleLohin（）验证验证码是否正确，在调用登录方法