node实现登录图片验证码的示例代码

cnpm i svg-captcha --save

var svgCaptcha = require('svg-captcha');

const cookieParase = require('cookie-parser');app.use(cookieParase());

// 获取验证码 getCaptcha(req, res, next){  var captcha = svgCaptcha.create({    // 翻转颜色    inverse: false,    // 字体大小    fontSize: 36,    // 噪声线条数    noise: 2,    // 宽度    width: 80,    // 高度    height: 30,   });   // 保存到session,忽略大小写   req.session = captcha.text.toLowerCase();   console.log(req.session); //0xtg 生成的验证码  //保存到cookie 方便前端调用验证  res.cookie('captcha', req.session);   res.setHeader('Content-Type', 'image/svg+xml');  res.write(String(captcha.data));  res.end(); },

// 获取验证码router.get('/api/getCaptcha', function(req, res, next) { return api.getCaptcha(req, res, next);})

<img src="/api/getCaptcha" src="//files.vevb.com/file_images/article/201804/201804200902547.png" />
	但是现在我们又有需求了,当点击这个验证码的时候，验证码会刷新
	6.实现点击验证码刷新
	更改一下刚刚验证码的结果，给他加一个外层a标签，并给他绑定一个点击事件,我这里用了 vue ，所以是 @click ,其他框架同理.
	
<a href="#" rel="external nofollow" @click="editCaptcha">  <img src="/api/getCaptcha"  this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()},
	这样就实现了点击验证码刷新的问题
	7.前端验证验证码
	刚刚我们在后台得到了验证码，但是前端要怎么验证呢？
	记得在3-2的时候我们安装了 cookie-parser ，并且在3-3里将生成的session保存在cookie里，这里我们前端就可以通过访问这个cookie拿到验证码的值了。
	 
	 
	 
	为什么要保存在cookie里？ 因为后端生成的session我们前端是访问不到的，如果等访问到的话，那还谈什么安全性可言，所以保存一份在cookie里供前端访问。
	
let captcha = document.cookie.split('=')[1]  if(this.yzm != captcha){   return this.$message.warning('验证码错误')  }
	最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。
	以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。