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="/UploadFiles/2021-04-02/getCaptcha">


但是现在我们又有需求了,当点击这个验证码的时候，验证码会刷新
6.实现点击验证码刷新
更改一下刚刚验证码的结果，给他加一个外层a标签，并给他绑定一个点击事件,我这里用了 vue ，所以是 @click ,其他框架同理.


<a href="#" rel="external nofollow" @click="editCaptcha">
  <img src="/UploadFiles/2021-04-02/getCaptcha">

点击事件 editCaptcha


editCaptcha () {
  this.$refs.imgYzm.src = '/api/getCaptcha"text-align: center">

为什么要保存在cookie里？ 因为后端生成的session我们前端是访问不到的，如果等访问到的话，那还谈什么安全性可言，所以保存一份在cookie里供前端访问。


let captcha = document.cookie.split('=')[1]
  if(this.yzm != captcha){
   return this.$message.warning('验证码错误')
  }


最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
           
            上一篇：vue中子组件向父组件传递数据的实例代码(实现加减功能)

            下一篇：vue项目中api接口管理总结