本节介绍一个登录案例，前后端通过输入验证码判断用户是不是机器人
- 安装expression-session
pnpm add express-session -S
pnpm add @types/express-session -D
- 安装验证码生成模块svgCaptcha
pnpm add svg-captcha
- 在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，但请求多了你怎么办，全部存在服务器中浪费资源，而且还得动态分配，开销太大了。
