学习nest.js中如何使用jwt进行身份验证,这一篇文章就够

简介: 学习nest.js中如何使用jwt进行身份验证,这一篇文章就够

前言

JWT 是什么

JWT (JSON Web Token) 是一个开放标准,它定义了一种以紧凑和自包含的方法,用于在双方之间安全地传输编码为 JSON 对象的信息。


因此,简单来说,它是 JSON 格式的加密字符串,其中包含敏感信息,它使我们能够验证不同服务间的发送者。


应该在什么时候使用 JWT?

授权: 这是使用 JWT 最常见的场景。JWT 用于授权而非身份验证。通过身份验证,我们验证用户名和密码是否有效,并将用户登录到系统中。通过授权,我们可以验证发送到服务器的请求是否属于通过身份验证登录的用户,从而可以授予该用户访问系统的权限,继而批准该用户使用获得的 token 访问路由、服务和资源。


信息交换: JSON Web Token 是在双方之间安全地传输信息的一种好方法。因为 JWT 可以被签名(例如,使用公钥/私钥对),所以使您能确保发送方是他们所声称的那一方。此外,由于签名是使用 Header 和 Payload 计算的,因此还使您能验证发送的内容没有被篡改。


在nest.js中使用

首先要导入第三方包

pnpm add @nestjs/passport passport passport-local @nestjs/jwt passport-jwt  @nestjs/config
pnpm add @types/passport-local @types/passport-jwt -D

获取token

接着在我们写身份验证的模块引入


image.png


JwtModule.registerAsync({
        imports: [ConfigModule],
        inject: [ConfigService],
        useFactory: (config: ConfigService) => {
            return {
                secret: config.get('TOKEN_SECRET'),
                signOptions: { expiresIn: '100h' }
            }
        }
    })

config这里引用的是configModule里面的服务,主要是读取环境变量,我们这里的Token密钥放在.env文件里面,详情看我之前环境变量配置那个博客


接着在app.module.ts中注册,这一步很关键,我做的时候一直报错,发现没有给我主动注入,需要手动注入

image.png

之后我们在auth.service.ts中使用这个服务类

image.png


image.png


这边我写的是prisma一个orm操作数据库,我们希望当我们登录验证通过之后会给我们返回一个token,           token这个函数里面配置的是生成token的类型,我们根据id以及name的唯一性,生成的token也具有唯一性, 第二个配置需要给一个密钥,给我们的token密钥即可 ,接着我们发送一下登录的请求


image.png

image.png


发现已经拿到token了,接下来我们就是根据token来获取对应用户的信息


接着我们在apifox中配置一下,将我们的token收集起来


image.png


image.png

image.png

image.png


image.png


这样配置好之后后续请求就可以带上token了


用token进行身份验证

我们需要创建一个验证策略  这个用的这个包的使用 nestjs-local-jwt-strategy - npm (npmjs.com)


import { ExtractJwt, Strategy } from 'passport-jwt';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { PrismaService } from '../prisma/prisma.service';
@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
    constructor(
        config: ConfigService,
        private readonly prisma: PrismaService
    ) {
        super({
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
            secretOrKey: config.get('TOKEN_SECRET'),
        });
    }
    async validate({ sub: id }) {
        return await this.prisma.user.findUnique({
            where: { id }
        })
    }
}

image.png


super的第一个参数表示,当我们请求时,可以自动获取头里面包含的token,第二个就是token密钥了,当我们上述步骤都没问题时开始走下面的验证规则 我这里是分析出token里面的id信息,然后去找到数据库里对应的信息 要注意这里返回的东西会挂在到一个全局对象requset身上,就跟我们在前端的window对象一样,所以我们后续可以取到我们想要的那个用户的信息了


image.png


/* eslint-disable prettier/prettier */
import { Controller, Post, Body, Get, UseGuards, Req } from '@nestjs/common';
import { AuthService } from './auth.service';
import RegisterDto from '../dto/register.dto';
import LoginDto from '../dto/login.dto';
import { AuthGuard } from '@nestjs/passport';
import { Request } from 'express';
@Controller('auth')
export class AuthController {
    constructor(private readonly auth: AuthService,
    ) { }
    @Post('register')
    register(@Body() dto: RegisterDto) {
        return this.auth.register(dto);
    }
    @Post('login')
    login(@Body() dto: LoginDto) {
        return this.auth.login(dto)
    }
    @Get('all')
    @UseGuards(AuthGuard('jwt'))
    all(@Req() req: Request) {
        return req.user
    }
}

接着在controller中我们用上守卫把验证策略用上 这里的'jwt'是跟这里一样


image.png

image.png

这样我们就拿到了对应token的用户信息


写在最后

jwt的内容不多,但是是开发中最常见的应用场景了,多加练习,才能真正掌握,现在框架基本都是面向扩展包开发了,多看看常用包的文档,提高开发效率。最后,写的不好的地方欢迎大家批评指正,希望大家能有所收获!

相关文章
|
8月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
9月前
|
存储 算法 安全
JWT深度解析:现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
JWT深度解析:现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
512 41
JWT深度解析:现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
|
8月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
9月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
313 0
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
277 1
JavaScript中的原型 保姆级文章一文搞懂
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
333 5
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
187 2
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
211 1
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
173 0