vue3 实现登录验证码 |
您所在的位置：网站首页 › origin登录验证码 › vue3 实现登录验证码 |
vue3 实现登录验证码
|
vue3项目前提条件：已安装引入【element-plus】，【vue-router@4】，【sass】等 第一种：图形验证码实现方式 一、图形验证码效果展示：
在component的文件夹下创建Sidentify.vue，将以下代码全部复制 import { onMounted, watch } from 'vue' // eslint-disable-next-line no-undef const props = defineProps({ identifyCode: { type: String, default: '1234' }, fontSizeMin: { type: Number, default: 25 }, fontSizeMax: { type: Number, default: 35 }, backgroundColorMin: { type: Number, default: 255 }, backgroundColorMax: { type: Number, default: 255 }, colorMin: { type: Number, default: 0 }, colorMax: { type: Number, default: 160 }, lineColorMin: { type: Number, default: 40 }, lineColorMax: { type: Number, default: 180 }, dotColorMin: { type: Number, default: 0 }, dotColorMax: { type: Number, default: 255 }, contentWidth: { type: Number, default: 112 }, contentHeight: { type: Number, default: 40 } }) // 生成一个随机数 const randomNum = (min, max) => { return Math.floor(Math.random() * (max - min) + min) } // 生成一个随机的颜色 const randomColor = (min, max) => { let r = randomNum(min, max) let g = randomNum(min, max) let b = randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' } // 绘制干扰线 const drawLine = (ctx) => { for (let i = 0; i < 5; i++) { ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax) ctx.beginPath() ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight)) ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight)) ctx.stroke() } } //在画布上显示数据 const drawText = (ctx, txt, i) => { ctx.fillStyle = randomColor(props.colorMin, props.colorMax) ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + 'px SimHei' let x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1)) let y = randomNum(props.fontSizeMax, props.contentHeight - 5) var deg = 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) } // 绘制干扰点 const drawDot = (ctx) => { for (let i = 0; i < 80; i++) { ctx.fillStyle = randomColor(0, 255) ctx.beginPath() ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI) ctx.fill() } } //画图 const drawPic = () => { let canvas = document.getElementById('s-canvas') let ctx = canvas.getContext('2d') ctx.textBaseline = 'bottom' // 绘制背景 ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax) ctx.fillRect(0, 0, props.contentWidth, props.contentHeight) // 绘制文字 for (let i = 0; i < props.identifyCode.length; i++) { drawText(ctx, props.identifyCode[i], i) } drawLine(ctx) drawDot(ctx) } //组件挂载 onMounted(() => { drawPic() }) // 监听 watch( () => props.identifyCode, () => { drawPic() } ) .s-canvas { cursor: pointer; } 1.2、使用验证码组件在login.vue页面中引入验证码组件 登录 import SIdentify from '@/components/Sidentify' import { ElMessage } from 'element-plus' import { ref, onMounted } from 'vue' import { useRouter } from 'vue-router' //获取路由器 let $router = useRouter() let sidentifyMode = ref('') //输入框验证码 let identifyCode = ref('') //图形验证码 let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母 //组件挂载 onMounted(() => { identifyCode.value = '' makeCode(identifyCodes.value, 4) }) // 生成随机数 const randomNum = (min, max) => { max = max + 1 return Math.floor(Math.random() * (max - min) + min) } // 随机生成验证码字符串 const makeCode = (o, l) => { for (let i = 0; i < l; i++) { identifyCode.value += o[randomNum(0, o.length)] } } // 更新验证码 const refreshCode = () => { identifyCode.value = '' makeCode(identifyCodes.value, 4) } //登录 const login = () => { //验证验证码不为空 if (!sidentifyMode.value) { ElMessage({ type: 'error', message: '验证码不能为空！' }) return } //验证验证码是否正确 if (sidentifyMode.value != identifyCode.value) { ElMessage({ type: 'error', message: '验证码错误' }) refreshCode() return } else { ElMessage({ type: 'success', message: '登录成功' }) $router.push('/home') } } .login-page { border: 1.5px solid rgb(123, 109, 30); border-radius: 8px; width: 400px; margin: 0 auto; margin-top: 50px; padding: 20px; .code { text-align: center; margin-bottom: 10px; } .login_btn { width: 100%; } } 第二种：滑动拼图实现方式 二、滑动拼图验证码效果展示：
详情👉👉：vue3-puzzle-vcode - npm 2.2、使用验证码插件在login.vue页面中引入验证码组件 登录 //自定义背景图，自己准备一张图片，引入即可 import Img from '@/assets/img.jpg' //引入'vue3-puzzle-vcode'插件 import Vcode from 'vue3-puzzle-vcode' import { ref } from 'vue' //引入路由 import { useRouter } from 'vue-router' //获取路由器 let $router = useRouter() //验证码模态框是否出现，默认不展示 const isShow = ref(false) //登录按钮 const login = () => { //展现验证码模态框 isShow.value = true } //用户通过了验证 const success = (msg) => { isShow.value = false console.log('验证通过' + msg) //通过验证跳转到home首页 $router.push('/home') } //用户点击遮罩层，关闭模态框 const close = () => { isShow.value = false } //用户验证失败 const fail = () => { console.log('验证失败') } 2.3、说明与备注说明：页面默认是只显示登录按钮的，验证码模态框默认不显示，只有点击登录按钮后才显示验证码模态框，当验证通过是跳转到home首页（具体跳转页面可根据需求而定） 备注：此组件是有默认图片的，我是自定义引入了一个图片，可根据需求来确定是否自定义图片 自定义图片步骤： 第一步：在Vcode组件中加imgs 第二步：在assets文件夹下存放图片，并引入 如果是引入多张图片，可在imgs中添加，如： :imgs="[Img1,Img2]" 备注：Vcode组件中的 :img 更改为 :imgs 👇👇👇
验证码类型 序号类型说明1常规验证码 type为picture或1 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。2运算验证码 type为compute或2 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。3滑动验证码 type为slide或3 通过简单的滑动即可完成验证，应用与移动端体验很好。4拼图验证码 type为puzzle或4 拼图。5选字验证码 type为pick或5 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。 事件说明 ready：验证码初始化成功的回调函数。 success：验证码匹配成功后的回调函数。 error：验证码匹配失败后的回调函数。 3.2、效果展示 
最后：👏👏😊😊😊👍👍 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |