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

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的方式是为了在每次请求的时候都需要传递一个延时