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

搭建后台验证接口

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这里需要跨域配置代理接口)

  <img @load="verifyLoadState=true"  @click="toggleVerify" :src="verifiy" alt="">

点击更新事件

 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)
    }

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