# **依赖 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()}`;
};
```
