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

相关文章
|
1月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
10天前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
11天前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
1天前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
14 3
|
10天前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
31 9
|
11天前
|
JavaScript 前端开发 算法
紧跟月影大佬的步伐,一起来学习如何写好JS(下)
该文章延续了上篇的内容,进一步探讨了编写优秀JavaScript代码的实践,强调了代码风格一致性、性能优化、团队约定的重要性,并通过实际案例分析了如何在不同场景下写出合适的代码。
|
2月前
|
JSON 前端开发 JavaScript
|
26天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
2月前
|
JavaScript 前端开发 iOS开发
学习强大的JavaScript一行代码,能够节省你的时间和代码量
这段内容介绍了25个实用的JavaScript一行代码技巧,涵盖复制内容到剪贴板、打乱数组、颜色值转换、计算平均值、检查数字奇偶性、数组去重、对象为空检测、字符串反转、日期计算、首字母大写、生成随机字符串、四舍五入、清除Cookie、检测暗黑模式等,帮助开发者提高效率并简化代码。
26 2
|
2月前
|
JavaScript 前端开发 小程序
基于js开发快速学习鸿蒙基础
【8月更文挑战第26天】
39 1