【vue】纯前端登录验证码实现记录 |
您所在的位置：网站首页 › 前端登录验证怎么实现 › 【vue】纯前端登录验证码实现记录 |
【vue】纯前端登录验证码实现记录
|
【写在前面的话】 应项目安全需求，登录验证要新增验证码，下意识觉得是前端的工作，后来才发现前端验证了个寂寞，真正安全的验证码验证工作应该交给后台来做，此是后话，先记录一下纯前端实现的验证码模块。 【实现过程】 #1#-> 在/componets/下创建一个新的组件，命名为 VertifyCode.vue export default { name: 'VertifyCode', 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) { const r = this.randomNum(min, max) const g = this.randomNum(min, max) const b = this.randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' }, drawPic () { const canvas = document.getElementById('s-canvas') const 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' const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) const 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() } } .s-canvas { height: 35px; padding: 2px; } .s-canvas canvas { /*margin-top: 1px;*/ /*margin-left: 8px;*/ height: 35px; }#2#-> 在登录页面 Login.vue，首先引入 VertifyCode.vue // 引入验证码组件 import VertifyCode from '../components/VertifyCode'在登录页面创建要渲染验证码的控件，这里采用了element-ui的el-form控件，用append的方式追加在input框之后 需要注意的是，组件名符合驼峰式命名规则，如这里是VertifyCode，引入组件的时候要写vertify-code，这个名字转换是默认的格式规则，不能乱写。 给验证码添加一个鼠标移上去自动变小手的图标 .login-code { cursor: pointer; margin: 0; }在中注册VertifyCode组件，并完善methods方法 // 引入验证码组件 import VertifyCode from '../components/VertifyCode' export default { name: 'Login', components: { VertifyCode }, // 注册组件 data () { return { // 验证码组件 identifyCodes: 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789', identifyCode: '', // 登录组件 loginForm: { user_id: '', user_pswd: '', vertify_code: '' }, loginFormRules: { // 验证用户名是否合法 user_id: [ { required: true, message: '请输入工号', trigger: 'blur' }, { min: 8, max: 8, message: '工号必须是8位字符', trigger: 'blur' } ], // 验证密码是否合法 user_pswd: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 8, // max: 10, message: '密码长度在8位字符以上', trigger: 'blur' } ], // 验证码输入是否正确 vertify_code: [ { required: true, message: '请输入验证码', trigger: 'blur' }, { required: true, validator: this.validateCode, change: 'blur' } ] } } }, // mounted () { // this.identifyCode = '' // this.makeCode(this.identifyCodes, 4) // }, methods: { // 表单【登录】 submitLogin (formName) { // 登录之前进行表单验证 this.$refs[formName].validate(async (valid) => { // 验证成功 if (valid) { const { data: res } = await this.$http.post('/login', this.loginForm) if (res.meta.status === '200') { this.$message.success('登录成功！') } else { this.$message.error('登录失败！请检查用户名和密码输入是否正确！' + res.meta.msg) } } }) }, // 表单【重置】 resetLoginForm (formName) { // this.$refs.loginFormRef.resetFields() this.$refs[formName].resetFields() }, // 验证码 randomNum (min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 生成随机验证码 makeCode (o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0, this.identifyCodes.length) ] } // console.log('identifyCode: ' + this.identifyCode) }, // 验证码刷新 refreshCode () { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 验证码输入校验 validateCode (rule, value, callback) { if (value !== this.identifyCode) { callback(new Error('验证码验证错误！请输入正确的验证码！')) } else { callback() } } }, created () { this.refreshCode() } }【实现效果】
【参考】 vue实现随机验证码功能 https://www.cnblogs.com/web-aqin/p/10796326.html vue项目 - 基于canvas的数字验证码 https://www.jianshu.com/p/99c6e2f3e457 vue identify--验证码插件 https://www.jianshu.com/p/0ec53763dc4c vue实现前端随机验证码（两种方法）https://www.cnblogs.com/Alioo/p/12792569.html |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |