express+svg-captcha（在vue中）验证码实现及验证（附前后端代码）

安装：

1.svg-captcha插件 （验证码生成的插件）

npm install --save svg-captcha

2.express-session中间件 （svg-captcha依赖session存储验证码信息）

npm install express-session 

3.cookie-parser （session的认证机制依赖cookie）

npm install cookie-parser

后端配置：

在入口文件（以app.js为例）中定义cookie解析器，位置写在路由分配前

var session = require('express-session');
var cookieParser = require('cookie-parser');

app.use(cookieParser());
app.use(session({
    secret: 'lce', // 对session id 相关的cookie进行签名
    resave: true,  //是指每次请求是否都重新设置session cookie
    saveUninitialized: false, // 是否保存未初始化的会话
    cookie: {
        maxAge: 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
    },
    rolling: true,//是否回滚
    name: "session",//key名，默认为connect.id
}));

在应用文件中，引入svg-captcha并配置

const express = require('express');
const svgCaptcha = require('svg-captcha');
const router = express.Router();
router.get('/get-svg', (req, res) => {
  const cap = svgCaptcha.create({
          // 翻转颜色
          inverse: false,
          // 字体大小
          fontSize: 36,
          // 噪声线条数
          noise: 3,
          // 宽度
          width: 80,
          // 高度
          height: 30,
      });
  req.session.captcha = cap.text; // session 存储验证码数值
  res.type('svg'); // 响应的类型
    res.send({
    code: 200,
    data: cap.data, 
  }) 
})
 
module.exports = router;

后端搭建完毕，测试输出，收到svg格式验证码，配置vue前台。

前端配置：

 <el-input
          placeholder="请输入验证码" 
          type="text" v-model="tform.inputma" >
          
          <i slot="suffix">
            <span v-html="src"  @click="getma"
        ref="captcha">  </span>
            </i>
        </el-input>

 在这需要注意的是，从后台获取到的svg是一串html格式的字符串，所以使用span标签，绑定为v-html的内容。

同时要设置点击事件，每次点击时进行验证码的刷新，为了区别每次刷新请求，在这里使用了时间戳格式。

 data() {
    return {    
        src:'',
        text:'',
    };
  },

async getma() {
      let {data}=await this.$axios.get("/get-svg'")
      console.log(data);
      this.src=data.data
      this.text=data.text
      this.$refs.captcha.src = data.data + Date.now();
    },

将获取到的信息封装为对象，发送到后端进行验证

后台验证

（数据库为mongodb）

router.post('/login', (req, res) {
  const name = req.body.name   //前台提交的用户名
  const pwd = md5(req.body.pwd) //md5格式密码
  const captcha = req.body.captcha.toLowerCase()  //验证码，转小写

  // 对用户名/密码格式进行检查, 如果非法, 返回提示信息
  if(captcha!==req.session.captcha) {
    return res.send({code: 1, msg: '验证码不正确'})
  }
  // 验证通过，删除保存的验证码
  delete req.session.captcha

  UserModel.findOne({name}, function (err, user) {
    if (user) {
      console.log('findUser', user)
      if (user.pwd !== pwd) {
        res.send({code: 1, msg: '用户名或密码不正确!'})
      } else {
        req.session.userid = user._id
        res.send({code: 200, data: {_id: user._id, name: user.name, phone: user.phone}})
      }
    } else {
      const userModel = new UserModel({name, pwd})
      userModel.save(function (err, user) {
        // 向浏览器端返回cookie(key=value)
        // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7})
        req.session.userid = user._id
        const data = {_id: user._id, name: user.name}
        // 3.2. 返回数据(新的user)
        res.send({code: 200, data})
      })
    }
  })
})

最后，根据返回信息，进行前台数据处理