开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
前言
上文我们完成了添加用户的接口，本文我们继续来完成登录接口。要完成登录接口，首先还要三个步骤。
- 前端获取登录验证码接口（新的接口）
- 验证登录用户信息（用户名、帐户、密码、uuid（验证验证码唯一字段））
- 判断用户名是否存在、账号是否停用
uuid为前端传来的验证图片验证码的唯一字段。前端获取验证码时用uuid获取验证码后端返回验证码并将uuid及验证码通过key，value的形式存在redis数据库，然后再将此uuid传给登录接口就可进行验证码的验证
获取登录验证码
添加路由
router/user.js
// 获取图形验证码
router.get('/checkCode', userHandler.getCheckCode);
添加路由回调函数
我们是采用svg-captcha这个库完成验证码的生成。然后通过redis存下验证码信息。例如{1665656556：axud}。所以我们先引入svg-captcha、redis
router_handler/user.js
// 引入生成图形验证码库
const svgCaptcha=require('svg-captcha')
// 引入封装好的redis
const redis = require('../utils/redis.js');
然后生成验证码，验证码信息用一定时间缓存入redis
/**
* 获取图形验证码
*/
exports.getCheckCode = (req, res) => {
// 生成验证码，获取catcha，有{data,text}两个属性，data为svg格式图片、text为验证码
const captcha = svgCaptcha.create({
size: 4,
ignoreChars: '0o1l',
color: true,
noise: 6,
background: '#cc9966',
height: 32,
width: 100
});
// 测试
console.log(captcha)
// 验证码键和缓存时间
const uuid = req.query.uuid;
const effectTime = 10 * 60;
// 存入redis
redis
.setKey(uuid, captcha.text.toLowerCase(), effectTime)
.then((result) => {
if (result) {
res.setHeader('Content-Type', 'image/svg+xml;charset=utf-8');
res.send({
code: 0,
message: '获取验证码成功',
data: captcha.data
});
}
})
.catch((err) => {
console.log(err);
return res.send({
code: 1,
message: '验证码获取失败',
data: null
});
});
};
验证用户信息
我们还是跟添加用户接口一样，使用joi添加对应需要验证的字段规则。
schema/user.js
// 用户名的校验规则
const username = joi.string().alphanum().min(1).max(10).required();
// 密码的验证规则
const password = joi
.string()
.pattern(/^[\S]{6,12}$/)
.required();
const checkCode = joi.string().alphanum().min(4).max(4).required();
const uuid = joi.number().required();
// 登录表单的验证规则对象
exports.user_login_schema = joi.object().keys({
username,
password,
checkCode,
uuid
});
然后在路由的回调函数中进行验证
router_handler/user.js
// 登录路由的处理函数
exports.login = (req, res) => {
// 验证入参，错误时抛出以捕获
const { error, value } = user_login_schema.validate(req.body);
if (error) {
throw error;
}
// 验证验证码
const {username,password,checkCode,uuid}=value
const captcha = await redis.getKey(uuid);
if (!captcha) {
return res.send({
code: 1,
message: '图形验证码已过期，请点击图片刷新'
});
}
if (checkCode.toLowerCase() !== captcha.toLowerCase()) {
return res.send({
code: 1,
message: '图形验证码不正确，请重新输入'
});
}
}）
测试
1.获取验证码
如果出现这个就说明成功了（因为我们接口返回的是svg格式图片，出现这个可能是postman无法识别svg格式）
我们可以看控制台打印的信息和redis数据库，发现是成功的
2.登录接口测试
我们用刚才的uuid和验证码进行登录
出现这个就说明成功了（由于本文篇幅原因，我们还没有验证用户名是否存在、可用，然后用res.send返回信息，没有返回信息的话，它就会一直请求）
我们用错误的验证码再来试试
发现验证码验证模块成功。下文我们将会完成登录接口。
