node实现登录图片验证码

实现这里的图形验证码我是用的node里svg-captcha模块,可以全部支持字符和数字，全平台支持，用起来很简单。

安装

cnpm i svg-captcha --save

在使用的地方导入

var svgCaptcha = require('svg-captcha');

获取验证码

• 安装 cookie-parser ,作用是将获取到的session保存到cookie，方便前端访问验证

cnpm i cookie-parser --save

• 使用 cookie-parser

const cookieParase = require('cookie-parser');

app.use(cookieParase());

这样就可以在项目里使用cookie了

• 获取验证码

function getCaptcha(req, res, next) {
    var captcha = svgCaptcha.create({
        // 验证码长度
        size: 5,
        // 要排除的字符
        ignoreChars: 'o0i1',
        // 干扰线条数量
        noise: 1,
        // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有
        color: true,
        // 验证码图片背景颜色
        background: '#4dffc9',
        // 宽度
        width: 150,
        // 高度
        height: 50,
        // viewBox
        viewBox: '0,0,150,50'
    });
    // 保存到session,忽略大小写
    req.session = captcha.text.toLowerCase();
    console.log(req.session); //0xtg 生成的验证码
    //保存到cookie 方便前端调用验证
    res.cookie('captcha', req.session);
    // res.setHeader('Content-Type', 'image/svg+xml');
    // res.write(String(captcha.data));
    // console.log(String(captcha.data), '111')
    // res.end();
    res.send({
        code: '0',
        data: captcha.data
    });
}

//console.log(String(captcha.data), '111')

做到这只是实现了生成验证码的功能，那么要访问呢？

编写后台路由

// 获取验证码

app.get('/getCaptcha', (req, res, next) => {
    getCaptcha(req, res, next)
})

当前端调用 /api/getCaptcha 这个接口的时候,返回验证码信息,是svg格式

前端访问

发请求获取到的是svg标签，用v-html展示

效果：