egg实现图形验证码

首先在router.js中注册路由

   router.get('/util', controller.util.captcha); //前台显示图片验证码
   router.post('/util', controller.util.verify); //后台比对验证码

然后写对应的controller文件

'use strict';
const Controller = require('egg').Controller;

class UtilController extends Controller {
    async captcha() {
        const ctx = this.ctx;
        let captcha = await ctx.service.captcha.captcha();
        ctx.response.type = 'image/svg+xml'; // 知道你个返回的类型
        ctx.body = captcha.data; // 返回一张图片
        ctx.session.login_code = captcha.text.toLowerCase();
        ctx.session.maxAge = 1000 * 60 * 10;
    }

    async verify() {
        const { type, code } = ctx.query // 获取客户端发送的类型和验证码
        const { login_code, register_code } = ctx.session // 获取session保存的验证码
        let result_success = { status: 0, message: 'success' } // 定义返回结果
        let result_error = { status: 1, message: '验证码错误' }
            // 登陆验证码验证
        if (type === '1') { //进行验证并返回结果
            ctx.body = code === login_code ? result_success : result_error
        } else {
            // 注册验证码验证
            ctx.body = code === register_code ? result_success : result_error
        }
    }
}

module.exports = UtilController;

编写Service文件

   const Service = require('egg').Service;
const svgCaptcha = require('svg-captcha');

class ToolsService extends Service {
    // 产生验证码
    async captcha() {
        const captcha = svgCaptcha.create({
            size: 4,
            fontSize: 40,
            width: 100,
            ignoreChars: 'OoLi',
            height: 40,
            noise: 4,
            background: '#cc9966'
        });
        this.ctx.session.code = captcha.text;
        return captcha;
    }
}

module.exports = ToolsService;

配置相应的插件

可以使用以下的npm install svg-captcha --save ; npm install egg-session --save就可以安装插件

   module.exports.captcha = {
    enable: true,
    package: 'svg-captcha',
};//添加svg插件并开启插件

module.exports.session = {
    enable: true,
    package: 'egg-session',
};//使用session

前端点击图片实时刷新图片验证码

下面的js中在路由后面生成随机的字符串是为了清除浏览器缓存，可以刷新出新的验证码图片，"？"的作用就是加上一个参数，也就是随机字符串

   <div>
   <img src="/captcha" alt="验证码图片" onclick="this.src = this.src + '?' +Math.random()">
   </div>

最后要强调的就是在前端使用img标签接收验证码，就是上面的html文件。

将验证码存入session中，在后台判断（session安全）。不懂的可以看这里