eggjs验证码svg-captcha图文详解

 序：

1、分两部分：egg安装svg-captcha 的部分、vue 加载的部分

2、建议用redis存验证码值，当然我会示范一遍session存、在备注redis 存储的方法在下面自行查阅

3、前台vue 点击二维码要刷新，也就是重新请求验证码注意

一、egg部分

安装依赖

npm install --save svg-captcha

配置路由   app/router.js

module.exports = app => {
  const { router, controller } = app;
  router.get('/api/verify', app.controller.base.verify); // 验证码
}

controller部分

 async verify() {
        const { ctx } = this;
        // service方法
        let captcha = await this.service.user.captcha();
        // 返回的类型格式
        ctx.response.type = 'image/svg+xml';  
        ctx.body = captcha.data; 
    }

service部分

const Service = require("egg").Service;
const svgCaptcha = require('svg-captcha'); //验证码
class UserService extends Service {
	async captcha() {
		let m=this;
	    // 第三方插件，
	    const captcha = svgCaptcha.create({
			size: 4,                 	// 长度(显示几个字符)
			fontSize: 50,           	// 字体大小
			width: 100,              	// 宽度
			height: 58,            		// 高度
			background: '#c9cdcd',   	// 背景颜色
		});
	    // 将验证码text文本保存到全局session中
	    m.ctx.session.code = captcha.text;
	    //验证码存redis
	    // await m.app.redis.get('db1').set(m.ctx.request.ip,captcha.text,"EX",60)  //ex是写死的，60是秒
	    return captcha;
	}
}

 注意！！！！！！下面这个别少了

const svgCaptcha = require('svg-captcha'); //验证码 

当 login验证的时候，我只贴关键部分

let yzm=m.ctx.session.code //session写法

        // let yzm=await m.app.redis.get('db1').get(m.ctx.request.ip);//这个是redis的写法
        if(yzm==null){
            m.ctx.throw(412, "验证码已过期");
        }
        if(yzm.toLowerCase()!=m.ctx.request.body.verify.toLowerCase()){ //都转换为小写在对比
            m.ctx.throw(412, "验证码错误");
        }

二、vue的部分

<template>
    <div  class="yzm-img" v-html="yzm" @click="verifyFun"></div>
</template>
<script>
	export default {
		data() {
			return {
				yzm:"",
				form:{
					username:"", //admin 超级管理员
					password:"",//123456
					verify:"",//验证码
				}
			}
		},
		mounted: function() {
			var m = this;
			m.verifyFun();
			// m.userInfo();
		},
		methods: {
			verifyFun(){
				let m=this;
				m.$ajax("/verify",{}, (res, err) => {  //注意，我这边没有/api 是因为我已经代理里配置了，你正常没代理还是得访问 /api/verify
					if(!err){
						m.yzm=res.data;
				}
			},null,"get")
		},
   }
</script>