关于Vue登录图形验证码的实现

这些阵子舍弃了手机验证码，舍弃了邮箱验证码，做了个图形验证码来防止前端登录页被恶刷，本来想着用后端返回流形式再渲染图片，后面发现，这也会被刷(小本服务器，抗不下这么多),所以就在前端用Canvas实现了一个图形验证码功能,代码如下:

<template>
    <canvas ref="canvas" :width="contentWidth" :height="contentHeight" @click="reloadCanvas"></canvas>
</template>
  
<script>
export default {
    data() {
        return {
            contentWidth: 120,
            contentHeight: 40,
            backgroundColor: 'rgb(0,0,0,0.2)'// 画布背景颜色
        }
    },
    mounted() {
        this.createdCode()// 页面初始化时生成验证码
    },
    methods: {
        createdCode() {
            const len = 4;  // 验证码长度
            const chars = 'ABCDEFGHJKMNPQRSTWXYZ123456789';  // 验证码字符集
            const codeList = Array.from({ length: len }, () =>
                chars.charAt(Math.floor(Math.random() * chars.length))
            )

            const identifyCode = codeList.join('')//    验证码  <-----------

            this.$emit('getImageCode', identifyCode.toLowerCase());// 将验证码字符串通过事件 emit 给父组件
            const canvas = this.$refs.canvas;// 获取 canvas 元素
            const ctx = canvas.getContext('2d');
            ctx.textBaseline = 'bottom';
            if (this.backgroundColor != '' && this.backgroundColor != null) {// 绘制画布背景颜色
                ctx.fillStyle = this.backgroundColor;
            } else {
                ctx.fillStyle = this.randomColor(255, 255);
            }
            ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
            codeList.forEach((code, i) => {// 绘制验证码字符
                this.drawText(ctx, code, i + 1, len);
            })
            this.drawLine(ctx);// 绘制干扰线
            this.drawDot(ctx);// 绘制干扰点
        },
        randomNum(min, max) {// 生成指定范围内的随机整数
            return Math.floor(Math.random() * (max - min) + min);
        },
        randomColor(min, max) {// 生成指定范围内的随机颜色
            const r = this.randomNum(min, max);
            const g = this.randomNum(min, max);
            const b = this.randomNum(min, max);
            return `rgb(${r},${g},${b})`;
        },
        drawText(ctx, txt, i, len) {// 绘制验证码字符
            ctx.fillStyle = this.randomColor(0, 160);
            ctx.font = `${this.randomNum(25, 30)}px SimHei`;
            const x = (i / (len + 1)) * 120;
            const y = this.randomNum(30, 35);
            const 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(100, 255);
                ctx.beginPath();
                ctx.moveTo(this.randomNum(0, 120), this.randomNum(0, 40));
                ctx.lineTo(this.randomNum(0, 120), this.randomNum(0, 40));
                ctx.stroke();
            }
        },
        drawDot(ctx) {// 绘制干扰点
            for (let i = 0; i < 80; i++) {
                ctx.fillStyle = this.randomColor(0, 255);
                ctx.beginPath();
                ctx.arc(this.randomNum(0, 120), this.randomNum(0, 40), 1, 0, 2 * Math.PI);
                ctx.fill();
            }
        },
        reloadCanvas() {// 点击按钮时清除画布并重新生成验证码
            const canvas = this.$refs.canvas
            const ctx = canvas.getContext('2d')
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            this.createdCode()
        }
    }
}
</script>

效果图是这样子滴:

看着还不错，结束~