Nest.js学习笔记（八）

本节介绍一个登录案例，前后端通过输入验证码判断用户是不是机器人

1. 安装expression-session

pnpm add express-session -S
pnpm add @types/express-session -D

1. 安装验证码生成模块svgCaptcha

pnpm add svg-captcha

1. 在main.ts中使用express-session

app.use(session({
  // 一段随机字符串(加盐)
    secret:'xiaoman',
  // 强制重新保存会话,即使在请求过程中它未被修改过
    rolling:false,
  // 设置cookie的名称
    name:'xiaoman.sid',
  // cookie相关选项
    cookie:{
      httpOnly:true,
      // 设置cookie的生存时间,以毫秒为单位
      maxAge:1000
    }
}))

1. 创建验证码并返回给前端

// 必须使用这种导入方式，直接导入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，但请求多了你怎么办，全部存在服务器中浪费资源，而且还得动态分配，开销太大了。