记录一下前端使用验证码登录的过程
后端用的是node.js，关键模块是svg-captcha
前端使用的是vue2
最后的登录界面如下：
后端代码
先上代码，然后解释
const svgCaptcha = require('svg-captcha')
exports.checkCode = (req, res) => {
const img = svgCaptcha.create({
size: 4,
ignoreChars: '0o1l',
color: true,
noise: 1,
background: '#666',
height: 40,
width: 113
})
console.log(img.text);
res.send(img)
}
这是最关键的代码，我习惯将路由和路由处理函数分开写，上面这块代码是路由处理函数
实际上就是利用svg-captcha生成了一个验证码图片，其中有几个参数需要重点关注一下：
- height和width，这个是设置的验证码的高度和宽度，需要看一下前端页面上input输入框的高度和宽度，我用的是elementUI，高度是40，所以这里的高度也是40，宽度自己慢慢调
- ignoreChars：验证码中不出现这些字符
看一下路由代码：
const express = require('express');
const userHandle = require('../route_handle/user')
const router = express.Router();
router.get('/checkCode', userHandle.checkCode)
module.exports = router
这没啥好说的
后端就这些了，后端的端口用的是3020，需要设置一下跨域，不然前端访问不到
前端代码
先上代码
<template>
<div class="login">
<el-form class="login-form" :model="loginForm">
<h3 class="title">若依后台管理系统</h3>
<el-form-item>
<el-input placeholder="Account" type="text" prefix-icon="el-icon-user-solid" v-model="loginForm.username">
</el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="Password" type="password" prefix-icon="el-icon-lock" v-model="loginForm.password">
</el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="CheckCode" prefix-icon="el-icon-picture-outline-round" v-model="loginForm.checkCode"
style="width: 63%">
</el-input>
<div class="login-code">
<!-- <img :src="codeUrl" class="login-code-imgs" @click="getCode"/>
-->
<div @click="getCode" v-html="code" style="vertical-align:middle"></div>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberme" style="margin: 0 0 15px 0;">Remenber Me</el-checkbox>
<el-form-item>
<el-button style="width: 100%" @click="submit('loginForm')" type="primary">Login</el-button>
</el-form-item>
</el-form>
<div class="el-login-footer">
<span>Copyright © 2018-2022 huanggang All Rights Reserved.</span>
</div>
</div>
</template>
<script>
// import { getCodeImg } from '@/api/login'
export default {
data() {
return {
loginForm: {
username: '',
password: '',
checkCode: '',
rememberme: false
},
codeUrl: '',
code: '',
codeText: ''
}
},
methods: {
submit() {
if (this.loginForm.checkCode.toLowerCase() == this.codeText.toLowerCase()) {
this.$message({
type: "success",
message: '登录成功'
})
} else (this.$message({
type: 'error',
message: '验证码错误！'
}))
},
getCode() {
this.$axios.get('/checkCode')
.then(res => {
console.log(res)
this.code = res.data.data
this.codeText = res.data.text
})
}
},
created() {
this.getCode()
}
}
</script>
<style scoped lang="scss">
.login {
display: flex;
height: 100%;
background: url(../assets/images/login-background.jpg);
background-size: cover;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: #707070;
margin: 0 auto 30px;
}
.login-form {
box-sizing: border-box;
width: 400px;
border-radius: 6px;
background-color: #fff;
padding: 25px 25px 5px 25px;
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
color: #fff;
font-size: 12px;
letter-spacing: 1px;
font-family: Arial;
}
.login-code {
width: 33%;
float: right;
div {
cursor: pointer;
}
}
.login-code-imgs {
}
</style>
这里不再赘述相关的配置了，直接看关键代码
获取验证码方法
getCode() 方法实现的功能是点击验证码图片时，切换获取验证码
获取验证码的方法是访问后端接口/checkCode，这个接口返回两个值（后端补充说明），一个是text，一个是data，text就是验证码的字符串值，data是验证码的html地址，在postman中测试返回的结果如下：
页面上使用v-html绑定验证码显示的地址
然后把text和data的值都赋给相应的数据
当然，为了能打开登录页面时，直接能显示验证码图片，需要把getCode方法挂载在生命周期函数created上
登录验证方法
登录验证不再校验数据库中的用户名和密码，只示意一下验证码的功能
在点击login按钮时校验验证码是否正确，功能写在submit()方法中，前端input框中使用v-model双向绑定了loginForm.checkCode的值，所以只要验证loginForm.checkCode与验证码codeText是否相等即可，为了保证用户体验，一般是忽略字母输入大小写的，所以都使用toLowerCase()处理一下。
这样就完成了前后端分离模式的登录验证码使用功能