Egg框架搭建后台服务【3】- 验证码

本文主要是介绍Egg框架搭建后台服务【3】- 验证码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

登录页面需要一个验证码，防止出现频繁“撞库”情况。

开发

安装

安装 svg-captcha 插件，实现 SVG 图片动态验证码。

npm i --save svg-captcha

配置

svg-captcha 不需要配置，但是因为牵扯到验证码校验时，需要将验证码共享到全局，方便其他位置的方法调用。

所以这里启用 session。（Ps：egg 框架自带 session，不需要额外安装）

// config.default.js
config.session = {key: 'EGG_SESSION_KEY',maxAge: 24 * 3600 * 1000, // 过期时间24小时httpOnly: true, // 默认就是 trueencrypt: true, // 加密传输renew: true  //每次访问页面都会给session会话延长时间
}

后台

const {Service} = require('egg');
const svgCaptcha = require('svg-captcha');class SystemService extends Service {async login(params) {const {ctx, app} = this;// 校验验证码if (params.verifyCode === ctx.session.verifyCode) {ctx.state = 200;ctx.body = {code: 200,success: true,data: {token: 123},msg: '登录成功',show: true}} else {ctx.body = {code: 400,success: false,msg: '验证码错误',show: true}}}async verifyCode() {const {ctx, app} = this;const verifyConfig = {size: 5,ignoreChars: '0oO1ilI', // 验证码字符中排除 0oO1ilInoise: 3, // 干扰线条的数量width: 176,height: 40,fontSize: 50,color: true, // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有background: '#fff',}// 生成二维码svgconst captcha = svgCaptcha.create(verifyConfig);// 验证码文字存放在 session 中(不区分大小写)ctx.session.verifyCode = captcha.text.toLowerCase();ctx.response.type = 'image/svg+xml';ctx.body = {code: 200,success: true,data: captcha.data,msg: '验证码获取成功',show: false}}
}module.exports = SystemService;

前台

/** 刷新验证码 */
const reloadCaptcha = () => {captcha().then(res => {verifyImg.value = res.data;});
}<div class="verify-code" @click="reloadCaptcha"><a-tooltip placement="right"><template #title>点击刷新验证码</template><div v-html="verifyImg"></div></a-tooltip>
</div>