egg+svg-captcha实现ejs，vue，react验证码效果_react svg 渲染验证码-CSDN博客

本文链接：https://blog.csdn.net/kyyius/article/details/115351077

// 首先在egg项目中安装相关依赖
// npm i egg-cors svg-captcha egg-view-ejs --save

//config/plugin.js
module.exports = {
  // had enabled by egg
  // static: {
  //   enable: true,
  // }
  ejs: {
	  enable: true,
	  package: 'egg-view-ejs',
  },
  cors: {
	  enable: true,
	  package: 'egg-cors',
  }
};

// 配置
// config/config.default.js
config.view = {
	  mapping: {
	  //.html后缀的文件使用ejs解析
		  '.html': 'ejs'
	  },
  };
//简单配置跨域相关
config.security = {
	  csrf: {
		  enable: false,
	  },
	  // 设置白名单
	  domainWhiteList: []
  };
  config.cors = {
	  origin: '*',
	  credentials: true,
  };

// controller/admin/base.js
'use strict';

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

class BaseController extends Controller {
	async verify(){
		// 获取验证码相关信息 
		let captcha = await this.service.tools.captcha();
		// this.ctx.response.type = 'image/svg+xml';
		// 将相关信息返回浏览器，待会供vue，react单独使用时要解开注释
		//this.ctx.body = {
		//	captcha,
		//};
		// 查看保存在session中的验证码信息
		console.log(this.ctx.session.code, 'verify');
		// ejs渲染到页面，传入验证码信息
		// vue , react使用时，把下面这句注释掉
		await this.ctx.render('admin/role/login', { svg: captcha.data });
	}
	
	async checkVerify(){
	    // 这里进行验证准备
		this.ctx.body = this.ctx.session.code;
	}
}

module.exports = BaseController;

// service/tools.js
'use strict';

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

class ToolsService extends Service {
	async captcha() {
		// 生成验证码相关信息
		// 具体情况查阅https://www.npmjs.com/package/svg-captcha
		let captcha = svgCaptcha.create({});
		// 验证码文本信息保存在session中
		this.ctx.session.code = captcha.text;
		console.log('验证码'+this.ctx.session.code);
		// 验证码信息返回给控制器
		return captcha;
	}
}
module.exports = ToolsService;

//router.js
router.get('/admin/verify', controller.admin.base.verify);
router.get('/admin/ckverify', controller.admin.base.checkVerify);

// app/view/admin/role/login.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		不转义解析，把svg的内容原封不动的放在这里 
		所以如果里面有标签会被解析
		-->
		<%- svg %>
		<!-- 
		如果是
		<%= svg %>
		转义解析，把svg的内容当成字符串放在这里 
		所以如果里面有标签不会被解析
		-->
	</body>
</html>

启动服务进入: http://localhost:7001/admin/verify
在这里插入图片描述

// 单独的文件，把这个文件托入浏览器中查看效果
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	</head>
	<body>
		<div id='root'>
			{{msg}}
			<div v-html="svg"></div>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#root',
				data(){
					return{
						msg: '验证码vue使用',
						svg: ''
					}
				},
				mounted(){
					axios('http://localhost:7001/admin/verify').then((res)=>{
						console.log(res)
						this.svg = res.data.captcha.data;
					})
				},
			})
		</script>
	</body>
</html>

在这里插入图片描述

// 单独的文件，把这个文件托入浏览器中查看效果
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>
		<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	</head>
	<body>
		<div id="root"></div>

		<script type="text/babel">
			class Verify extends React.Component {
				state = {
					msg: '验证码react使用',
					verify: 'xx'
				}
				componentDidMount(){
					axios('http://localhost:7001/admin/verify').then((res)=>{
						this.setState({
							verify: res.data.captcha.data
						})
					})
				}
				render(){
					return (
					<div>
					  <div>{this.state.msg}</div>
					  <div dangerouslySetInnerHTML = {{ __html:this.state.verify }}></div>
					</div>
					)
				}
			}
			ReactDOM.render(<Verify/>, document.getElementById('root'));
		</script>
	</body>
</html>