Vue结合NodeJS实现图片验证码和登录校验的功能

说明: 在每次点击验证码的时候就会发送一次请求,并且NodeJS使用express-session保存生成的验证码,在登录的时候拿出来校验是否合格
在这里插入图片描述

1. NodeJS方面
  1. 安装 npm i svg-captcha svg-captcha中文文档地址

  2. 安装express-session npm i express-session express-session的说明

  3. 首先要在app.js文件中注册使用express-session,要在注册路由之前使用
    注意:可能会出现无法获取session的现象,把cookie: { secure: false}设置为false,即可

    const session = require('express-session')
    // 使用express-session 来存放数据到session中
    app.use(
        session({
            secret: 'keyboard cat',
            resave: false,
            saveUninitialized: true,
            cookie: { secure: true }
        })
    )
    // 注册路由
    
  4. express中的使用svg-captcha,使用req.session.img_code就可以将验证码存入session中,再将前端传递的验证码做对比

    const svgCaptcha = require("svg-captcha")
    app.get('/api/v1/login/img_code', (req, res) => {
    	const captcha = svgCaptcha.create({
    		noise: 3, // 干扰线条的数量
            background: '#ff5033' // 背景颜色
    	});
    	// 将图片的验证码存入到 session 中
    	req.session.img_code = captcha.text.toLocaleUpperCase() // 将验证码装换为大写
    	res.type('svg');
    	res.send(captcha.data);
    });
    // 登录
    app.post('/api/v1/login',(req,res) => {
    	const {img_code} = req.body
        // img_code 获取传递的图片验证码 ,如果不相等,验证码错误
       	if(img_code.toLocaleUpperCase() !== req.session.img_code) res.sendResult(400,{},'验证码错误')
    })
    
  5. 得到的数据是就是显示出来的 svg格式的图片验证码
    在这里插入图片描述

2. Vue方面
  1. 在后台传递的数据过来的时候,给img绑定动态src属性的形式要使用直接的请求方式
    <img 
    ref="img_codeRef" 
    src="http://127.0.0.1:7777/api/v1/login/img_code" 
    @click="img_codeClick" 
    class="img-verifiCode">
    
  2. 点击事件的时候也是直接触发的图形验证码的数据请求
    // 点击图片 获取图片验证码
    img_codeClick(){
        this.$refs.img_codeRef.src = 'http://127.0.0.1:7777/api/v1/login/img_code?time' + new Date()
    },
    
  3. 在后面拼接time的方式是为了在每次请求的时候都需要传递一个延时
Logo

前往低代码交流专区

更多推荐