nodejs+express+svg-captcha+vue实现验证码

在做用户登录的时候需要使用验证码,于是找度娘了解了一下,这里使用nodejs+express+svg-captcha+vue实现验证码
1.安装svg-captcha依赖,.后续过程需要使用到session,所以要安装express-session依赖,session的认证机制必须依赖cookie，所以还应该同时安装一个cookie-parser

npm install --save svg-captcha
npm install --save cookie-parser
npm install --save express-session

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

const express = require("express");
const bodyParser = require("body-parser");
const app = new express();
app.use(cookieParser());
app.use(session({
    secret: 'secret', // 对session id 相关的cookie 进行签名
    resave: true,
    saveUninitialized: false, // 是否保存未初始化的会话
    cookie: {
        maxAge: 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
    },
}));
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

3.验证码获取接口,将验证码存储在session中,并将生成验证码后返回给前端

app.post('/admin/captcha', function (req, res) {
    var captcha = svgCaptcha.create({
        size: 4,  //验证码长度
        width: 100, //svg宽度
        height: 50, //svg高度
        // background: "#eee",//svg背景色
        noise: 2, //干扰线条数
        fontSize: 35, //字体大小
        ignoreChars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxz',   //验证码字符中排除
        color: false // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有           
    });
    req.session.captcha = captcha.text;
    res.type('svg');
    res.status(200).send({
        code: 200,
        result: captcha.data
    });
});

4.vue前台使用

<div v-html="svgData"></div>

在挂载完成时发送获取验证码请求,这里需要使用跨域代理

mounted() {
    this.$http.post("/admin/captcha", {}).then(resData =>  {
      if (resData.body.code == 200) {
        this.svgData = resData.body.result;
      }
    });
  }

到这一步已经能够在前台显示验证码了
要登录验证的时候只需把表单的值传给后端验证就行啦,上面的获取验证码接口已经将验证码存在session里面了,只需要从req,session.captcha获取就可以了,此时验证码区分大小写.

文章操作具体可见:https://www.cnblogs.com/kakayang/p/8794546.html
https://blog.csdn.net/qq_39166488/article/details/82142238
插件还有一些其他的配置项及API，具体可见 https://github.com/lemonce/svg-captcha