前后端分离实现验证码的校验、登录

您所在的位置：网站首页 › vue登录页面验证码不显示 › 前后端分离实现验证码的校验、登录

前后端分离实现验证码的校验、登录

2023-05-16 08:23| 来源: 网络整理| 查看: 265

在前后端不分离的情况下，一般使用的是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 方法，并导出

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); }); 前端功能实现 Login 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!'); } }); } } }

由于我们要用到图片验证码的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 }); }); });

【本文地址】

前后端分离实现验证码的校验、登录

前后端分离实现验证码的校验、登录

今日新闻

推荐新闻