小满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.sid
cookie	设置返回到前端 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 //存储验证码记录到sessionres.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: "验证码错误"}}}
}

小满nestjs（第九章 nestjs Session）相关推荐

机器学习-第九章聚类
机器学习-第九章聚类 D系鼎溜已关注 2020.02.19 10:36:17字数 3,312阅读 375 9.1 聚类任务在无监督学习任务中,包括了密度估计.异常检测以及聚类等.其中应用最广泛的是 ...
第九章 Django框架——csrf请求伪造和csrf_token使用
第九章 Django框架--csrf请求伪造和csrf_token使用一.csrf请求伪造二.csrf_token使用三.简单的csrf_token应用四.Ajax使用csrf_token 一 ...
Python计算机视觉：第九章图像分割
第九章图像分割 9.1 更新用户 9.1.1 编辑表单 9.1.2 编辑失败 9.1.3 编辑成功 9.2 权限限制 9.2.1 必须先登录 9.2.2 用户只能编辑自己的资料 9.2.3 更友好的 ...
MOOC —— Python语言基础与应用 by 北京大学第九章高级扩展模块
第九章高级扩展模块 49.例外处理 50.推导式 51.生成器函数 generator object 52.上机练习:生成器 53.图像处理库 54.Web服务框架 55.网络爬虫 56.数据可视化 ...
《Linux 高级路由与流量控制手册（2012）》第九章
更多奇技淫巧欢迎订阅博客:https://fuckcloudnative.io 译者序本文内容来自 Linux Advanced Routing & Traffic Control HOWT ...
鸟哥的Linux私房菜(基础篇)- 第九章、文件与文件系统的压缩与打包
第九章.文件与文件系统的压缩与打包最近升级日期:2009/08/20 在 Linux 底下有相当多的压缩命令可以运行喔!这些压缩命令可以让我们更方便从网络上面下载大型的文件呢!此外,我们知道在 Li ...
《Servlet和JSP学习指南》一第2章　Session管理 2.1　网址重写
第2章 Session管理 Session管理(或Session追踪)是Web应用程序开发中一个非常重要的主题.这是因为Web语言HTTP是无状态的.在默认情况下,Web服务器不知道一个HTTP请求是 ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
【机器学习实战第九章】树回归 CART算法的原理与实现 - python3
本文来自<机器学习实战>(Peter Harrington)第九章"树回归"部分,代码使用python3.5,并在jupyter notebook环境中测试通过,推荐c ...

小满nestjs（第九章 nestjs Session）

引言

参数配置详解

验证码案例

小满nestjs（第九章 nestjs Session）相关推荐

最新文章

热门文章