在前后端不分离的情况下，一般使用的是session 存储验证码文字，前端页面传过来的值与 session 存储的值做对比。但在前后端分离后，就不能用session 了
前后端分离的时候，我们又要如何实现？
思路：
1.用户进入页面，前端请求后端生成一张带验证码图片
2.后端生成验证码图片时，将验证码文本存到 Redis中，key 用 uuid 生成，value 为验证码文本，有效时间5分钟，把 生成的 uuid 也传给前端
3.前端显示后端传来的验证码图片，用户输入请求时，将用户的输入的验证码和 uuid传给后端
4.后端接受用户的输入的验证码和 uuid，根据 key = uuid，查出 value，获取到正确的验证码，与用户的验证码比对，返回结果。
功能实现
生成图片验证码
svg-captcha是一个可以生成图形验证码的模块
安装 svg-captcha
npm i svg-captcha
生成图片验证码，并导出
const code = require("svg-captcha");
function createCode() {
return code.create({
size: 4,
ignoreChars: "0o1iIl",
noise: 3,
color: true,
background: "#fff",
fontSize: 60
});
}
module.exports = createCode;
生成唯一key
uuid 是一个可以生成唯一的模块
安装 uuid
npm i uuid
生成唯一id，并导出
const { v4: uuidv4 } = require('uuid');
function createUuid(){
return uuidv4()
}
module.exports = createUuid
redis 存储验证码
安装 redis
npm i redis
引入redis，并配置
const client = redis.createClient({
host: "127.0.0.1", // redis地址
port: 6379 // 端口号
})
// 监听连接事件
client.on("connect", error => {
if(!error) {
console.log("connect to redis")
}
})
// 监听错误事件
client.on("error", error => {
throw new Error(error)
})
封装 set、get 方法，并导出
function setString(key, value, expire) {
return new Promise((resolve, reject) => {
client.set(key, value, (error, replay) => {
if(error) {
reject("设置失败")
}
if(expire) {
client.expire(key, expire);
}
resolve("设置成功")
});
})
}
function getString(key) {
return new Promise((resolve, reject) => {
if(key) {
client.get(key, (error, replay) => {
if(error) {
reject(`获取${key}失败`)
}
resolve(replay);
})
}
})
}
module.exports = {
setString,
getString
}
后端接口生成图片验证码
express 中生成图片验证码
router.get('/captcha', (req, res) => {
let captcha = createCode()
let uuid = createUuid()
setString(uuid,captcha.text.toLowerCase(),300)
res.type('svg');
res.status(200).send(captcha.data);
});
前端功能实现
<template>
<div>
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<input type="text" v-model="captcha" placeholder="Captcha" />
<a v-html="captchaImg" alt="" @click="getCaptcha" href="javascript:;"></a>
<button @click="login">Login</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
captcha: '',
uuid:'',
captchaImg:""
}
},
created(){
this.init()
},
methods: {
init(){
this.getCaptcha()
},
getCaptcha(){
axios.get("/captcha").then(res=>{
this.uuid = res.headers.uuid
this.captchaImg = res.data
})
},
login() {
// 前端验证
if (!this.username || !this.password || !this.captcha || !this.uuid) {
alert('Please enter all fields!');
return;
}
// 后端验证
axios.post('/login', {
username: this.username,
password: this.password,
captcha: this.captcha,
uuid:this.uuid
}).then(res => {
if (res.data.success) {
// 登录成功
} else {
alert('Login failed!');
}
});
}
}
}
</script>
由于我们要用到图片验证码的uuid，就使用axios 方式请求
后端实现登录功能
router.post('/login', (req, res) => {
const { username, password, captcha,uuid } = req.body;
// 校验输入的内容 不能为空
if(!username || !password || !captcha || !uuid){
return res.json({ success: false, message: 'data empty!' });
}
// 校验验证码
if (captcha.toLowerCase() !== getString(uuid)) {
return res.json({ success: false, message: 'Incorrect captcha!' });
}
// 根据用户名和密码查询数据库 密码使用md5加密存储
User.findOne({ username,password:md5(password) }, (err, user) => {
if (err) {
return res.json({ success: false, message: 'Server error!' });
}
if (!user) {
return res.json({ success: false, message: 'Incorrect username or password!'});
}
// 登录成功逻辑
return res.json({ success: true });
});
});
网友评论