小满nestjs（第九章 nestjs Session）

引言

session 是服务器 为每个用户的浏览器创建的一个会话对象 这个session 会记录到 浏览器的 cookie 用来区分用户

我们使用的是nestjs 默认框架express 他也支持express 的插件 所以我们就可以安装express的session

npm i express-session --save

需要智能提示可以装一个声明依赖

npm i @types/express-session -D

然后在main.ts 引入 通过app.use 注册session

import * as session from 'express-session'

app.use(session())

参数配置详解

secret 生成服务端session 签名 可以理解为加盐name 生成客户端cookie 的名字 默认 connect.sidcookie 设置返回到前端 key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false, maxAge: null }。rolling在每次请求时强行设置 cookie，这将重置 cookie 过期时间(默认:false)
nestjs 配置

import { NestFactory } from '@nestjs/core';
import { VersioningType } from '@nestjs/common';
import { AppModule } from './app.module';
import * as session from 'express-session'
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableVersioning({
    type: VersioningType.URI
  })
  app.use(session({ secret: "XiaoMan", name: "xm.session", rolling: true, cookie: { maxAge: null } }))
  await app.listen(3000);
}
bootstrap();

验证码案例

前端 vue3 ts element-plus fetch

安装element

npm install element-plus -S

然后简单的绘制页面

<template>
     <div class="wraps">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
               <el-form-item label="账号">
                    <el-input v-model="formLabelAlign.name" />
               </el-form-item>
               <el-form-item label="密码">
                    <el-input type="password" v-model="formLabelAlign.password" />
               </el-form-item>
               <el-form-item label="验证码">
                    <div style="display:flex">
                         <el-input  v-model="formLabelAlign.code" />
                         <img @click="resetCode" :src="codeUrl" alt="">
                    </div>
               </el-form-item>
               <el-form-item>
                    <el-button @click="submit">登录</el-button>
               </el-form-item>
          </el-form>
     </div>
</template>
     
<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue';

const codeUrl = ref<string>('/api/user/code')

const resetCode = () => codeUrl.value = codeUrl.value + '?' + Math.random()

const labelPosition = ref<string>('right')

const formLabelAlign = reactive({
     name: "",
     password: "",
     code: ""
})

const submit = async () => {
     await fetch('/api/user/create', {
          method: "POST",
          body: JSON.stringify(formLabelAlign),
          headers: {
               'content-type': 'application/json'
          }
     }).then(res => res.json())
}

</script>
     
<style>
* {
     padding: 0;
     margin: 0;
}

.wraps {
     display: flex;
     justify-content: center;
     align-items: center;
     height: inherit;
}

html,
body,
#app {
     height: 100%;
}
</style>

我们可以看到 session 已经存到了浏览器

跨域我用了本地dev 解决的

    proxy:{
      '/api':{
         target:'http://localhost:3000/',
         changeOrigin:true,
         rewrite: path => path.replace(/^\/api/, ''),
      }
    }

后端nestjs 验证码插件 svgCaptcha

npm install svg-captcha -S

import { Controller, Get, Post, Body, Param, Request, Query, Headers, HttpCode, Res, Req } from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
import * as svgCaptcha from 'svg-captcha';
@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) { }
  @Get('code')
  createCaptcha(@Req() req, @Res() res) {
    const captcha = svgCaptcha.create({
      size: 4,//生成几个验证码
      fontSize: 50, //文字大小
      width: 100,  //宽度
      height: 34,  //高度
      background: '#cc9966',  //背景颜色
    })
    req.session.code = captcha.text //存储验证码记录到session
    res.type('image/svg+xml')
    res.send(captcha.data)
  }

  @Post('create')
  createUser(@Req() req, @Body() body) {
    console.log(req.session.code, body)
    if (req.session.code.toLocaleLowerCase() === body?.code?.toLocaleLowerCase()) {
      return {
        message: "验证码正确"
      }
    } else {
      return {
        message: "验证码错误"
      }
    }

  }
}