nodejs开发后端 生成svg验证码，并登录时后端验证是否正确

 依赖 svg-captcha

拉取依赖

npm i svg-captcha --save

创建验证码公共方法

在util文件夹下创建Captcha.js文件

const svgCaptcha = require("svg-captcha");
const options = {
	size: 4, // 验证码长度
	ignoreChars: "0oO1ilI", // 验证码字符中排除 0oO1ilI
	noise: 2, //干扰线条数
	color: true, //验证码字体颜色
	background: "#eee", //背景颜色
	// ignoreChars: "0o1i", //验证码字符中排除 0o1i
	// font: "30px Arial", //验证码字体
};

const Captcha = {
	create: () => {
		const captcha = svgCaptcha.create(options); // 生成验证码
		const { text, data: img } = captcha; // 获取验证码内容和svg
		return { text, img };
	},
};
module.exports = Captcha;

安装sesstion存储依赖

npm i express-session --save

创建session中间件

const session = require("express-session");
app.use(
	session({
		secret: "sessiontest", //与cookieParser中的一致
		resave: true,
		saveUninitialized: true,
	})
);

登录验证

const { captcha } = req.body; // 获取用户传入的验证码
const sessionCaptcha = req.session.captcha; // 读取session中的验证码
if (!captcha || captcha.toLowerCase() !== sessionCaptcha) {
    res.send({ code: 401, msg: "验证码错误" });
    return;
}

方法一：

创建验证码路由

router.get("/getCaptcha", UserController.getCaptcha);

app.js token验证中间件添加白名单 "/getCaptcha"

创建controller

在UserController.js中创建方法getCaptcha

getCaptcha: (req, res) => {
		const { text, img } = Captcha.create();
		req.session.captcha = text.toLowerCase(); // 将验证码文本存储在session中
		res.type("svg");
		res.send({ code: 200, data: img });
	},

前端使用svg验证码并展示

vue - html
<img :src="captchaUrl" @click="getCaptcha" />

vue - js
const captchaUrl = ref("");
const getCaptcha = () => {
	axios.get("/api/getCaptcha").then((res) => {
		if (res.data.code != 200) {
			ElMessage.error(res.data.msg);
			return;
		}
		captchaUrl.value = `data:image/svg+xml;charset=utf-8, ${encodeURIComponent(
			res.data.data
		)}`;
	});
};
onMounted(() => {
	getCaptcha();
});

方法二：

创建验证码路由

router.get("/getCaptchaStream", UserController.getCaptchaStream);

app.js token验证中间件添加白名单 "/getCaptchaStream"

创建controller

在UserController.js中创建方法getCaptchaStream

getCaptchaStream: (req, res) => {
    const { text, img } = Captcha.create();
    req.session.captcha = text.toLowerCase(); // 将验证码文本存储在session中
    res.type("svg");
    res.send(img);
},

前端使用svg验证码并展示

vue - html
<img
    :src="captchaStreamUrl"
    class="captcha"
    alt="验证码"
    @click="getCaptchaStream"
/>
vue- js
const captchaStreamUrl = ref(`/api/getCaptchaStream?t=${Date.now()}`);
const getCaptchaStream = () => {
	captchaStreamUrl.value = `/api/getCaptchaStream?t=${Date.now()}`;
};