NestJS学习:使用session实现登录验证

news2025/7/11 12:17:24

参考

大佬的视频教程:nestjs session案例
大佬的博客地址:小满nestjs(第九章 nestjs Session)

在学习某些知识时如果有大佬的视频教程与文档真的是太爽了,能够学习到好多新知识。

nest后台

session

session 是服务器 为每个用户的浏览器创建的一个会话对象 这个session 会记录到 浏览器的 cookie 用来区分用户
我们使用的是nestjs 默认框架express 他也支持express 的插件 所以我们就可以安装express的session

如果以后需要什么插件完全可以在npm里搜索express,毕竟express已经很久了,生态十分完善。

安装

npm i express-session --save

因为是基于ts的项目还需要装一个声明依赖

npm i @types/express-session -D

关于express-session找到了一篇不错的文章:深入浅出 Express 中间件 Express-session

注册session中间件

main.ts中引入并注册

import * as session from 'express-session'
app.use(session())

参数配置

参数

 cookie: {
  // Cookie Options
  // 默认为{ path: '/', httpOnly: true, secure: false, maxAge: null }
 /** 
  * maxAge: 设置给定过期时间的毫秒数(date)
  * expires: 设定一个utc过期时间,默认不设置,http>=1.1的时代请使用maxAge代替之(string)
  * path: cookie的路径(默认为/)(string)
  * domain: 设置域名,默认为当前域(String)
  * sameSite: 是否为同一站点的cookie(默认为false)(可以设置为['lax', 'none', 'none']或 true)
  * secure: 是否以https的形式发送cookie(false以http的形式。true以https的形式)true 是默认选项。 但是,它需要启用 https 的网站。 如果通过 HTTP 访问您的站点,则不会设置 cookie。 如果使用的是 secure: true,则需要在 express 中设置“trust proxy”。
  * httpOnly: 是否只以http(s)的形式发送cookie,对客户端js不可用(默认为true,也就是客户端不能以document.cookie查看cookie)
  * signed: 是否对cookie包含签名(默认为true)
  * overwrite: 是否可以覆盖先前的同名cookie(默认为true)*/
  },
    
  // 默认使用uid-safe这个库自动生成id
  genid: req => genuuid(),  
    
  // 设置会话的名字,默认为connect.sid
  name: 'value',  
  
  // 设置安全 cookies 时信任反向代理(通过在请求头中设置“X-Forwarded-Proto”)。默认未定义(boolean)
  proxy: undefined,
    
  // 是否强制保存会话,即使未被修改也要保存。默认为true
  resave: true, 
    
  // 强制在每个响应上设置会话标识符 cookie。 到期重置为原来的maxAge,重置到期倒计时。默认值为false。
  rolling: false,
    
  // 强制将“未初始化”的会话保存到存储中。 当会话是新的但未被修改时,它是未初始化的。 选择 false 对于实现登录会话、减少服务器存储使用或遵守在设置 cookie 之前需要许可的法律很有用。 选择 false 还有助于解决客户端在没有会话的情况下发出多个并行请求的竞争条件。默认值为 true。
  saveUninitialized: true,
    
  // 用于生成会话签名的密钥,必须项  
  secret: 'secret',
  
  // 会话存储实例,默认为new MemoryStore 实例。
  store: new MemoryStore(),
  
  // 设置是否保存会话,默认为keep。如果选择不保存可以设置'destory'
  unset: 'keep'

配置

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { VersioningType } from '@nestjs/common';

import * as session from 'express-session';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  //启用版本控制
  app.enableVersioning({
    type: VersioningType.URI,
  });
  //注册中间件
  app.use(
    session({
      secret: 'abcd',
      name: 'abcd.session',
      rolling: true,
      cookie: { maxAge: null },
    }),
  );
  await app.listen(5000);
}
bootstrap();

验证码

安装

npm install svg-captcha -S

文档
相关配置官方文档很详细,可以自行查看:svg-captcha

import { Body, Controller, Get, Post, Req, Res } from '@nestjs/common';
import { UserService } from './user.service';

//引入验证码
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: 5, //字符的个数
      fontSize: Math.floor(Math.random() * 10) + 40, //生成40~50大小的验证码
      width: 120, //宽度
      height: 32, //高度
      ignoreChars: '0oO1ilI',
      noise: 2, // 干扰线
      color: true,
      background: '#eee',
    });
    //存储验证码记录到session
    req.session.code = captcha.text;
    //设置返回值类型,并返回
    res.type('image/svg+xml');
    res.send(captcha.data);
  }

  //校验验证码是否正确
  @Post('create')
  createUser(@Req() req, @Body() body) {
    if (req.session.code === body?.code) {
      return {
        code: 200,
        message: '验证码正确',
      };
    } else {
      return {
        code: 200,
        message: '验证码错误',
      };
    }
  }
}

常见的 http-content-type 类型
在这里插入图片描述

vue3前台

文章中使用了fetch进行请求接口,fetch不熟,这里使用axios

处理跨域

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:5000/',
                changeOrigin: true,
                rewrite: path => path.replace(/^\/api/, '')
            }
        }
    }
});

vue文件

<template>
    <div style="width:500px;margin-left: 600px;">
        <el-form label-position="right" label-width="100px" :model="form">
            <el-form-item label="验证码">
                <div style="display:flex;">
                    <el-input v-model="form.code" />
                    <img :src="codeSrc" class="code-img" @click="getCode" />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const form = reactive({
    code: undefined
});

const codeSrc = ref<string>('http://localhost:5000/user/code');

const submit = () => {
    axios.post('/api/user/create', {
        code: form.code
    }).then(({ data: d }) => {
          ElMessage.info(d.message);
    });
};
const getCode = () => {
    codeSrc.value = codeSrc.value + '?' + new Date().getTime();
};
</script>

<style lang="scss" scoped>
.code-img {
    width: 120px;
    height: 32px;
    cursor: pointer;
    margin-left: 10px;
}
</style>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/38687.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

目标检测算法——3D公共数据集汇总(附下载链接)

>>>深度学习Tricks&#xff0c;第一时间送达<<< &#x1f680;&#x1f680;&#x1f680;近期&#xff0c;小海带在空闲之余&#xff0c;收集整理了一批3D公共数据集供大家参考。 整理不易&#xff0c;小伙伴们记得一键三连喔&#xff01;&#xff01;&…

十个值得珍藏的正则表达式

正则表达式常学常忘&#xff0c;记规则不如记例子&#xff0c;记多不如记精&#xff0c;记例子就记最经典的。下面是本人珍藏的十个有用的正则表达式&#xff0c;不吝分享&#xff0c;以飨读者。 正则表达式要点 小括号&#xff1a;代表分组 中括号&#xff1a;代表集合 大括号…

回归分析(1)-回归分析的基本概念

1.回归方程 由于x是可控的非随机变量&#xff0c; 而Y 是一个与x有关的随机变量&#xff0c;因此&#xff0c;直接研究变量Y与x之间的相关关系是困难的&#xff0e; 如果注意到随机变量Y的数学期望反映了随机变量Y的平均取值&#xff0c;因此&#xff0c; 可考虑研究EY与x之间的…

第六章 支持向量机

6.1 间隔与支持向量 给定一个训练样本集&#xff0c;分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面。但是这个划分超平面也是很多的&#xff0c;如下图所示 直观上应该去找两类样本中最中间的划分超平面&#xff0c;因为该划分超平面对训练样本局部扰动…

与分类有关的一种时序优先现象

(A&#xff0c;B)---2*30*2---(1,0)(0,1) 用网络分类A和B&#xff0c;让A由两张图片组成&#xff08;0&#xff0c;0&#xff09;&#xff08;0&#xff0c;1&#xff09;&#xff0c;让B由两张图片组成&#xff08;1&#xff0c;0&#xff09;&#xff08;0&#xff0c;0&…

(附源码)计算机毕业设计JavaJava毕设项目租车网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

Ubuntu22.04:设置Samba服务

Samba服务可以实现在主机间共享文件与Windows的共享通用。 Ubuntu22.04可以按照如下步骤安装并开启Samba服务&#xff1a; 1.安装samba sudo apt install samba 2.创建一个用于共享的目录(路径和路径名可以自行决定&#xff09; mkdir samba 3.设置共享目录的访问权限 s…

Prometheus的remotewrite for java

1、增加参数重启prometheus 修改 prometheus启动参数 - "--enable-featureremote-write-receiver" 重启 prometheus 2、下载案例 GitHub - bprasen/remotewrite 3、迁移 将案例中的代码复制到springboot/springcloud中 pom中增加 <!-- prometheus remote writ…

Windows OpenGL 图像阴影

目录 一.OpenGL 图像阴影 1.原始图片2.效果演示 二.OpenGL 图像阴影源码下载三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 特效 零基础 OpenGL ES 学习…

【机器学习项目实战10例】(一):利用线性回归实现股票预测分析

💥 项目专栏:【机器学习项目实战10例】 文章目录 一、利用线性回归实现股票预测分析二、加载股票数据三、将数据进行标准化四、形成训练数据五、加载数据集六、构建线性回归模型七、精度测试八、网格搜索九、绘制结果一、利用线性回归实现股票预测分析 股价预测其实是一个较…

PyTorch深度强化学习中蒙特卡洛策略梯度法在短走廊环境(CartPole-v0)中的实战(超详细 附源码)

需要源码请点赞关注收藏后评论区留下QQ~~~ 一、策略梯度法 策略梯度法&#xff08;PG&#xff09;利用策略函数来选择动作&#xff0c;同时使用值函数来辅助策略函数参数的更新&#xff0c;根据策略类型的不同&#xff0c;可以分为随机策略梯度和确定性策略梯度 策略梯度法与…

1990-2021年全国各省城市化水平数据

1990-2021年全国各省城市化水平数据 1、包括&#xff1a;全国31省 2、时间&#xff1a;1990-2021年 3、指标包括&#xff1a;城镇常住人口数(万人)、常住人口数(万人)、城市化水平 4、指标衡量&#xff1a;城市化率本地区城镇人口/总人口 5、指标解释&#xff1a; 城市化…

C++ 语法基础课5 —— 字符串

文章目录1. 字符与整数的联系 —— ASCII码1.1 练习 — 统计数字和字母个数2. 字符数组(记得多\0)2.1 字符数组的输入输出2.2 字符数组的常用操作2.3 遍历字符数组中的字符3. 标准库类型 string3.1 定义和初始化3.2 string 上的操作3.2.1 string的读写3.2.2 使用getline读取一整…

操作系统之启动过程

本文参考MOOC哈工大操作系统课程&#xff0c;需要有一定的汇编基础 打开电源后&#xff0c;计算机做了什么 此时需要先运行的代码是BIOS x86 PC开机后CPU处于实模式&#xff0c;寻址方式为CS:IP&#xff08;CS左移4位IP&#xff09;开机时&#xff0c;初始化的CS0xFFFF&…

_linux 进程间通信(命名管道)

文章目录1. 创建一个命名管道2. 用命名管道实现server&client通信2.0 log.hpp打印日志信息2.1 comm.hpp(server.cc和client.cc共有文件)2.2 server.cc读取数据2.3 client.cc发送数据2.4 结果展示3. 还可以多个进程接收1. 创建一个命名管道 命名管道可以从命令行上创建&…

微服务介绍微服务环境搭建

一、微服务介绍 从互联网早起到现在&#xff0c;系统架构大体经历了下面几个过程: 单体应用架构--->垂直应用架构--->分布 式架构--->SOA架构--->微服务架构&#xff0c;当然还有悄然兴起的Service Mesh(服务网格化)。 微服务架构 微服务架构在某种程度上是面向…

机械原理复习试题及答案

机械原理 一、填空题&#xff1a; 1.机构具有确定运动的条件是机构的自由度数等于 。 2.同一构件上各点的速度多边形必 于对应点位置组成的多边形。 3.在转子平衡问题中&#xff0c;偏心质量产生的惯性力可以用 相对地表示。 4.机械系统的等效力学模型是具有 &#xff0c;其上作…

Word文档中经常会遇到字体间距突然变得很大,怎么处理?

Word文档中经常会遇到字体间距突然变得很大&#xff0c;怎么处理&#xff1f; 目录 Word文档中经常会遇到字体间距突然变得很大&#xff0c;怎么处理&#xff1f; 1、如下图字体间距突然变大。 可能原因一&#xff1a; 1、选中该段文字&#xff0c;鼠标右键选择【段落 】 …

【882. 细分图中的可到达节点】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个无向图&#xff08;原始图&#xff09;&#xff0c;图中有 n 个节点&#xff0c;编号从 0 到 n - 1 。你决定将图中的每条边 细分 为一条节点链&#xff0c;每条边之间的新节点数各不相同。 图…

进程替换与复制

目录进程替换基础知识什么是进程替换进程替换函数函数使用execlexeclpexecleexecvexecvpexecve进程替换基础知识 什么是进程替换 进程替换&#xff1a;把当前进程换为其他进程执行。&#xff08;其他进程&#xff1a;创建新进程&#xff0c;生成可执行程序&#xff0c;装在进…