Session应用

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

nestjs 默认使用的是express框架， 他也可以支持 express的插件

npm i express-session --save
npm i @types/express-session -D

然后在main.ts中引入

import * as session from 'express-session'

app.use(session())

参数配置详解

参数	用途
secret	生成服务度session签名
name	生成客户端cookie的名字默认 connect.sid
cookie	设置返回到前端key的属性，默认{ path: ‘/’, httpOnly: true, secure: false, maxAge: null }
rolling	每次请求时强行设置cookie，这将重置cookie过期时间

配置示例

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as session from "express-session";


async function bootstrap() {
  const app = await NestFactory.create(AppModule);
    app.use(session({
        secret: 'Lvxl',
        rolling: true,
        name: 'Lvxl.ppid'
    }))
  await app.listen(3000);
}
bootstrap();

验证码案例

前端代码：

<template>
    <div style="margin: 20px" />
    <el-form
      :label-position="labelPosition"
      label-width="auto"
      :model="formLabelAlign"
      style="max-width: 600px"
    >
      <el-form-item label="Name">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="password">
        <el-input v-model="formLabelAlign.password" type="password"/>
      </el-form-item>
      <el-form-item label="svgCode">
        <el-input v-model="formLabelAlign.code" />
        <img @click="resetCode" :src="codeUrl">
      </el-form-item>
    <el-form-item>
        <el-button @click="submit">login</el-button>
    </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormProps } from 'element-plus'
  
  const labelPosition = ref<FormProps['labelPosition']>('right')
  const codeUrl = ref<string>('/api/user/createcode')
  const userUrl = ref<string>('/api/user/createuser')
  const formLabelAlign = reactive({
    name: '',
    password: '',
    code: '',
  })

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

  const submit = () => {
    fetch(userUrl.value, {
        method: 'post',
        body: JSON.stringify(formLabelAlign),
        headers: {
            'content-type': 'application/json'
        }
    }).then(res => res.json()).then(res => {
        console.log(res, '.213')
    })
  }
  </script>

nestJs代码

npm i svg-captcha -S

import {Controller, Get, Post, Body, Param, Request, Query, Headers, HttpCode,Session,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 svgCapcha from 'svg-captcha'
import {create} from "svg-captcha";

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}
    @Get('createcode')
    createCode(@Req() req, @Res() res, @Session() session) {
        const Captcha = svgCapcha.create({
            size: 4, // 生成几个验证码
            fontSize: 50, // 文字大小
            width: 100,
            height:34,
            background: '#cc9966'
        })
        session.code = Captcha.text;
        res.type('image/svg+xml');
        res.send(Captcha.data);
    }

    @Post('createuser')
    createUser(@Body() body, @Session() session) {
        console.log(body, session)
        if(body?.code === session.code) {
            return {
                code: 200,
                message: {
                    ...body,
                    sessionCode: session.code,
                    su: 'success'
                }
            }
        } else {
            return {
                code: 200,
                message: {
                    ...body,
                    sessionCode: session.code,
                    su: 'error'
                }
            }
        }

    }
}