手把手教你实现一个vue3+ts+nodeJS后台管理系统（五）-烟雨网

开启掘金成长之旅！这是我参与「掘金日新计划 · 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: '图形验证码不正确，请重新输入'
    });
  }
}）