本节介绍一个登录案例，前后端通过输入验证码判断用户是不是机器人
- 安装expression-session
pnpm add express-session -S
pnpm add @types/express-session -D
- 安装验证码生成模块svgCaptcha
pnpm add svgCaptcha
- 在main.ts中使用express-session
app.use(session({ // 一段随机字符串 secret:'xiaoman', // 强制重新保存会话,即使在请求过程中它未被修改过 rolling:false, // 设置cookie的名称 name:'xiaoman.sid', // cookie相关选项 cookie:{ httpOnly:true, // 设置cookie的生存时间,以毫秒为单位 maxAge:1000 } }))
- 创建验证码并返回给前端
// 必须使用这种导入方式，直接导入svgCaptcha将会变成undefined import * as svgCaptcha from 'svg-captcha'; @Controller('user') export class UserController { constructor(private readonly userService: UserService) {} @Get('code') verification(@Req() req, @Res() res) { const captcha = svgCaptcha.create({ size: 4,//生成几个验证码 fontSize: 50, //文字大小 width: 100, //宽度 height: 34, //高度 background: '#cc9966', //背景颜色 }) // 将验证码存储在前端的session对象中 req.session.code = captcha.text // 设置响应类型,如果不写+xml的话客户端会提示下载文件,加了后就可以直接展示在页面上了 res.type('image/svg+xml') // 这将把cookie也一起带出去 res.send(captcha.data) }
关于req.session：
HTTP session提供了一个用于在不同请求间存储信息的方法，个人理解是将信息存储在客户端的请求头中，每次客户端输入验证码都会将输入的内容和请求头中的session进行比较，并且这里的session可以在多个请求间共享。
那为什么不在后端随便定义一个变量呢？
答：只有一个请求的时候当然OK，但请求多了你怎么办，全部存在服务器中浪费资源，而且还得动态分配，开销太大了。
