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

搭建后台验证接口

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

[code]app.use('/svg', svgRouter);

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

[code]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安装

[code]$ npm install express-session save

session的认证机制必须依赖cookie，所以还应该同时安装一个

cookie-parser

，安装方法同上。然后再app.js中导入这两个中间件：

[code]var cookieParser = require('cookie-parser');

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

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

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

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

点击更新事件

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

2.axios传给后台

[code]import axios from 'axios'
Vue.prototype.$http = axios

[code]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）

[code]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)
}

 

阅读更多