nodejs+express+svg-captcha验证码实现，以及vue+axios使用该验证码接口

前几天写项目遇到验证码问题 后台前台都是自己搭建也遇到了很多坑 这里记录一下

搭建后台验证接口

1.在app.js中创建svg路由

app.use('/svg', svgRouter);

2.在rouutes文件夹下创建svg.js文件

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

module.exports = router;

此时我进行测试http://3000/svg发现没有返回值，排查错误后发现是没有注册session中间件

nodeJS：Express框架中session内存存储链接在此

3.express-session是express中比较常用的处理session的中间件,使用npm安装

$ npm install express-session save

session的认证机制必须依赖cookie，所以还应该同时安装一个cookie-parser，安装方法同上。然后再app.js中导入这两个中间件：

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

var session = require('express-session');

之后定义cookie解析器，注意，该定义必须写在路由分配之前：

app.use(cookieParser());

app.use(session({

secret: '12345',

name: 'name',

cookie: {maxAge: 60000},

resave: false,

saveUninitialized: true,

}));

各参数意义：
secret：用来对session数据进行加密的字符串.这个属性值为必须指定的属性。
name：表示cookie的name，默认cookie的name是：connect.sid。
maxAge：cookie过期时间，毫秒。
resave：是指每次请求都重新设置session cookie，假设你的cookie是6000毫秒过期，每次请求都会再设置6000毫秒。
saveUninitialized： 是指无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid。

此时后台已经搭建完毕，测试输出输出成功，配置vue前台。

vue前台使用

1.图片引用链接(vue-cli默认接口为8080，服务器接口为3000这里需要跨域配置代理接口)

点击更新事件

 toggleVerify(e){
                if(!this.verifyLoadState) return;
                // 防止下一次重复点击
                this.verifyLoadState =  false
                const base = '/api/svg'
                this.verifiy = base + '?' + e.timeStamp
            },

2.axios传给后台

import axios from 'axios'
Vue.prototype.$http = axios

goLog(){
                console.log(this.data)
                    this.$http
                    .post('/api/users?action=register',
                    {params:{
                        // 传输数据给后台
                        account:this.data.account,
                        password:this.data.password,
                        verifiy:this.data.verifiy
                    }})
                    // ./net?action=login',this.data)
                    .then(res=>{
                        console.log(res.data.code,'res.data.code')
                        if(res.data.code==='200'){
                            // 验证成功返回值为200进入主页面
                        this.$router.push('/')
                        }else{
                            // 验证出错误时重新更新验证码
                            this.error = res.data.error
                             const base = '/api/svg'
                             this.verifiy = base + '?' + Math.random()
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            }
        },

nodejs后台验证验证码输入是否正确（数据库为mongodb）

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.post('/', function(req, res, next) {
  let { db,query,session,body } = req
  console.log(req.body,'query')
  let { action } = req.query
  var error={}
    var account = req.body.params.account;
    let password = req.body.params.password;
    let captcha = req.body.params.verifiy;
    console.log(captcha)
    const sessionCaptcha = req.session.captcha.toLowerCase()
    console.log(captcha,sessionCaptcha,'sessionCaptcha')
  // 登录
  if(action == 'login'){
    if(sessionCaptcha!=captcha){
      error.verifiy='验证码不正确'
      res.send({
        code:500,
        error:error
    })
    }else{
      let where = {}
      where['account'] = `${account}`;
      console.log(where,'where');
      db.collection('users').find(where,function(err,result){
        if(err) throw err;
        console.log(result,'result')
        if(result==''){
          error.account='账号不存在'
          res.send({
            code:500,
            error:error
          })
        }else{
          let Rresult = result
          console.log(Rresult[0].password,'result');
          if(Rresult[0].password == password){
            res.send({
              code:"200",
              msg:"操作成功",
              item:result,
              error:''
          });
          }else{
            error.password='密码不正确'
            res.send({
              code:500,
              error:error
            })
          }
        }
        
    })
    }
    // console.log(result)
    }