jwt的基本介绍

说出我的悲惨故事给大家乐呵乐呵:公司刚来了一个实习生,老板让他写几个接口给我,我页面还没画完呢。他就把接口给我了,我敲开心,第一次见这么高效率的后端。但我很快就笑不出来了。他似乎不知道HTTP通信是无状态的。他不能识别登录的用户,只会把数据添加进数据库。虽然网络上有很多资料,但为了省时间,我打算写了简单的demo和他探讨一下,可能不太规范,希望大家多多指教。

JSON Web Token 简介

JSON Web Token 简称JWT,在HTTP通信过程中,进行身份认证。
好了,就说这么多,先上代码,因为有些概念说不好会把人转晕,手动操作后就容易理解了:
请添加图片描述

 /*** * 实现流程:* 用户登录,服务器产生一个token(加密字符串)发送给前端,* 前端将token保存(想存哪就存哪)* 前端发起数据请求时携带token* 服务端验证token是否合法,合法继续操作,不合法终止操作* token的使用场景:无状态请求,保持用户的登录状态,第三方登录(token+auth2.0)*/async function onFinished(e){//提交表单默认会跳转到新的页面,或者刷新整个页面//1.阻止默认事件e.preventDefault();//2.定义formData对象let formData = new FormData(e.target);let username = formData.get('username');let password = formData.get('password');console.log(username, password);try{const result = await  login(username, password);//save token to local storagestorage.set('token', result.token)console.log(result)}catch(e){console.log(e)}}
export function login(username,password) {return axios.post('http://192.168.50.225:3000/login',{username,password})
}

node 中 jwt的使用

var express = require('express');
const jwt = require('jsonwebtoken');//加载包
const fs = require('fs');
const { dirname } = require('path');
var router = express.Router();
/*** login*/router.post('/login', function(req, res, next){console.log(req.body)//{ username: 'eqw', password: 'qweq' }//产生token默认算法hs256/*** 此方法接收两个参数* 第一个是要加密保存的数据(一个对象,不要放隐秘性的数据,如密码),* 第二个是要加密的私钥(一个字符串,越乱越好)*/let token=jwt.sign(req.body,'rieryowqerdfkjhasdfqr');console.log(token);//返回一个加密字符串// 服务器签发的token//eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoiMTIzIiwiaWF0IjoxNTcwMDc2NjU5fQ.3FT6v8zVptdWGBILD1m1CRY6sCP1I3E947krUh_E3//我就不链接数据库了,将数据存入本地文件//fs.appendFile()方法的作用是:将指定的内容追加到文件中。如果该文件不存在,则创建该文件:fs.appendFile(__dirname+'/data.txt', JSON.stringify(req.body), function (err) {if (err) throw err;console.log('Saved!');});res.send({token,status:200,message:'success'})
});module.exports = router;

前端登录:
只做演示实验,前端没有对密码加密勿怪
请添加图片描述
请添加图片描述

前端请求数据:
request.js

import axios from 'axios';
import { storage } from '../utils/localStorage';axios.defaults.timeout = 5000
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';//在请求头里验证是否有token
axios.interceptors.request.use(function (config) {const token=storage.get('token');console.log(token)if(token){config.headers['Authorization'] = 'Bearer ' + token;}else{//重定向到登录界面}return config;}, error => {console.log(error)Promise.reject(error)})//请求响应axios.interceptors.response.use(function (response) {if (response.status === 401) {//}return response;}, function (error) {return Promise.reject(error)})export default axios;

user.js

import axios from '../request';export function login(username,password) {return axios.post('http://192.168.50.228:3000/login',{username,password})
}export function getInfo(){return axios.get('http://192.168.50.228:3000/info');
}

后端验证token:

/*** 请求数据*/router.get('/info',function(req,res,next){//客户端请求数据的时候验证token//客户端传递过来的tokenconsole.log(req.headers.authorization)let tokens=req.headers.authorization.split(' ')[1];/*** verify接收两个参数,* 第一个参数是客户端传递过来的token,* 第二个参数是加密时的私钥;* 第三个参数是回调函数*/jwt.verify(tokens,'rieryowqerdfkjhasdfqr',function (err,data) {console.log(err);//签名通过返回null,签名不通过返回err(JsonWebTokenError: invalid signature)	console.log(data);//	通过返回解密数据,失败返回unfinishedfs.readFile(__dirname+'/data.txt',function(err, datas){if(err){res.writeHead(505,{'Content-Type':'text/html;charset=utf-8'});res.end({message:'500 服务器内部错误'})return;}//console.log(data,'database');//<Buffer 7b 22 75 73 65 72 6e 61 6d 65 22 3a 22 6d 69 61 6f 22 2c 22 70 61 73 73 77 6f 72 64 22 3a 22 6d 69 61 6f 31 32 33 22 7d>console.log(JSON.parse(datas.toString()));//从文件中直接读取到时Buffer ,把Buffer转成datas.toString() 字符串const user=JSON.parse(datas.toString());console.log(user.username===data.username,'-_-');if(user.username===data.username){res.send({data:[{id:1,name:"纸崩"},{id:2,name:"当怪兽来敲门"}]})}else{res.writeHead(404,{'Content-Type':'text/html;charset=utf-8'});res.end({message:'token is error'})}})});
});

前端请求:
请添加图片描述
现在在来看概念:
HTTP通信是无状态的,因此客户端的请求到了服务端处理之后是无法返回给原来的客户端的。so,需要对访问的客户进行识别。
常用的做法是session机制:客户端在服务端登陆成功之后,服务端会生成一个sessionID,返回给客户端,客户端将sessionID保存到cookie中,再次发起请求的时候,携带cookie中sessionID到服务端,服务端会缓存该session,当客户端请求到来的时候,服务端就知道是哪个用户的请求,并将处理的结果返回给客户端,完成通信。
通过上面的分析,可以知道session存在以下问题:

  • session保存在服务端,当客户访问量增加时,服务端就需要存储大量的sesion会话,对服务器又很大的考验;

所以这里采用了JSON Web Token,JSON Web Token是怎么做的?
1.客户端通过用户名和密码登录服务器
2.服务端对客户端进行身份验证
3.服务端对该用户生成Token,返回给客户端
4.客户端将Token保存到本地浏览器,一半保存cookie中
5.客户端发起请求,需要携带该tooken
6.服务端收到请求后,首先验证该Token,之后返回数据。
服务端不需要存储token,只需要对Token中携带的信息进行验证即可;
无论客户端访问后台的哪台服务器,只要可以通过用户信息的验证即可。

参考资料:https://blog.csdn.net/weixin_44036436/article/details/102004739

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入解读redis的zset和跳表【源码分析】

1.基本指令 部分指令&#xff0c;涉及到第4章的api&#xff0c;没有具体看实现&#xff0c;但是逻辑应该差不多。 zadd <key><score1><value1><score2><value2>... 将一个或多个member元素及其score值加入到有序集key当中。根据zslInsert zran…

手把手教你开发律师法律咨询小程序

随着科技的快速发展&#xff0c;移动互联网已经成为人们获取信息和服务的主要途径之一。对于律师和法律机构来说&#xff0c;开发一个律师法律咨询小程序&#xff0c;可以更好地满足用户的需求&#xff0c;提供便捷的法律咨询服务。本文将引导您如何使用乔拓云网这个第三方制作…

Jmeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就不…

精确到区县级街道乡镇行政边界geojson格式矢量数据的获取拼接实现Echarts数据可视化大屏地理坐标信息地图的解决方案

在Echarts制作地理信息坐标地图时&#xff0c;最麻烦的就是街道乡镇级别的行政geojson的获取&#xff0c; 文件大小 788M 文件格式 .json格式&#xff0c;由于是大文件数据&#xff0c;无法直接使用记事本或者IDE编辑器打开&#xff0c;推荐Dadroit Viewer&#xff08;国外…

【小黑送书—第三期】>>《深入浅出SSD》

近年来国家大力支持半导体行业&#xff0c;鼓励自主创新&#xff0c;中国SSD技术和产业良性发展&#xff0c;产业链在不断完善&#xff0c;与国际厂商的差距逐渐缩小。但从行业发展趋势来看&#xff0c;SSD相关技术仍有大幅进步的空间&#xff0c;SSD相关技术也确实在不断前进。…

stack和queque

1.stack 1.1定义 T 是容器内的数据类型&#xff1b; Container是数据类型的容器适配器 vector和list和stack的区别 1.2 stack的功能 注意这里没有迭代器&#xff1b;原因stack是先进后出的规律&#xff1b;这就规定该容器不可以随机访问&#xff1b; 2. queue

算法笔记:0-1背包问题

n个商品组成集合O&#xff0c;每个商品有两个属性vi&#xff08;体积&#xff09;和pi&#xff08;价格&#xff09;&#xff0c;背包容量为C。 求解一个商品子集S&#xff0c;令 优化目标 1. 枚举所有商品组合 共2^n - 1种情况 2. 递归求解 KnapsackSR(h, i, c)&#xff…

VScode配置Jupyter

环境 安装步骤 1、插件安装 2、更改pip加速源 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 参考&#xff1a;vscode python配置pip源 ​​​​​​​ 【Python学习】Day-00 Python安装、VScode安装、pip命令、镜像源配置、虚拟环境 3、建…

怎么通过docker/portainer部署vue项目

这篇文章分享一下如何通过docker将vue项目打包成镜像文件&#xff0c;并使用打包的镜像在docker/portainer上部署运行&#xff0c;写这篇文章参考了vue-cli和docker的官方文档。 首先&#xff0c;阅读vue-cli关于docker部署的说明&#xff0c;上面提供了关键的几个步骤。 从上面…

体会jdk17对于空指针的增强

jdk17 // 可以清楚的看出来a.b.c.num中由于c是空指针&#xff0c;所以导致异常 jdk11 // 只报第6行空指针了&#xff0c;但是因为哪个变量&#xff0c;不知道

Spring注册Bean系列--方法5:@Import+ImportBeanDefinitionRegistrar

原文网址&#xff1a;Spring注册Bean系列--方法5&#xff1a;ImportImportBeanDefinitionRegistrar_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Spring注册Bean的方法&#xff1a;ImportImportBeanDefinitionRegistrar。 注册Bean的方法我写了一个系列&#xff0c;见&#xff…

14:00面试,14:06就出来了,这问的过于变态了。。。

前言 刚从小厂出来&#xff0c;没想到在另一家公司我又寄了。 在这家公司上班&#xff0c;每天都要加班&#xff0c;但看在钱给的比较多的份上&#xff0c;也就不太计较了。但万万没想到9月一纸通知&#xff0c;所有人不准加班了&#xff0c;不仅加班费没有了&#xff0c;薪资…

秒验:可以自定义UI的一键登录服务

一键登录如今成为越来越多移动应用的首选&#xff0c;但千篇一律的登陆界面在引发用户担忧其安全性的同时&#xff0c;也容易让用户在不同APP切换时产生误解。因此&#xff0c;由国内知名移动应用开发服务商MobTech打造的一键登录工具——秒验&#xff0c;通过允许开发者自定义…

Qt之QDial(表盘)

简介 QDial类提供了一个四舍五入的范围控制&#xff08;如速度计或电位计&#xff09;&#xff0c;非常适合需要循环计数的情况&#xff0c;例如角度等。 头文件&#xff1a;#include <QDial> qmake&#xff1a;QT widgets 继承&#xff1a;QAbstractSlider …

FPGA设计时序约束三、设置时钟组set_clock_groups

目录 一、背景 二、时钟间关系 2.1 时钟关系分类 2.2 时钟关系查看 三、异步时钟组 3.1 优先级 3.2 使用格式 3.3 asynchronous和exclusive 3.4 结果示例 四、参考资料 一、背景 Vivado中时序分析工具默认会分析设计中所有时钟相关的时序路径&#xff0c;除非时序约束…

Flink学习笔记(一):Flink重要概念和原理

文章目录 1、Flink 介绍2、Flink 概述3、Flink 组件介绍3.1、Deploy 物理部署层3.2、Runtime 核心层3.3、API&Libraries 层3.4、扩展库 4、Flink 四大基石4.1、Checkpoint4.2、State4.3、Time4.4、Window 5、Flink 的应用场景5.1、Event-driven Applications【事件驱动】5.…

docker数据管理和网络通信

docker数据管理 管理 Docker 容器中数据主要有两种方式&#xff1a; 数据卷&#xff08;Data Volumes&#xff09;和数据卷容器&#xff08;DataVolumes Containers&#xff09;。 1&#xff0e;数据卷 数据卷是一个供容器使用的特殊目录&#xff0c;位于容器中。可将宿主机…

轻量级MobileSAM:比FastSAM快4倍,处理一张图像仅需10ms(附源代码)

论文地址&#xff1a;https://arxiv.org/pdf/2306.14289.pdf 代码地址&#xff1a;https://github.com/ChaoningZhang/MobileSAM 一、概要简介 SAM是一种prompt-guided的视觉基础模型&#xff0c;用于从其背景中剪切出感兴趣的对象。自Meta研究团队发布SA项目以来&#xff0c…

浅析如何在抖音快速通过新手期并积累粉丝

抖音是一款非常受欢迎的短视频分享平台&#xff0c;它提供了一个快速成名和积累粉丝的机会。对于新手来说&#xff0c;通过四川不若与众总结的以下几个步骤可以帮助你快速通过抖音的新手期。 首先&#xff0c;确定你的内容定位。在抖音上&#xff0c;有各种各样的内容类型&…

解决报错:模块“react-redux“没有导出的成员“TypedUseSelectorHook”

在react整合typescript,redux时&#xff0c;写hook.ts时报这个错&#xff1a;模块"react-redux"没有导出的成员“TypedUseSelectorHook” 现象如下&#xff1a; 原因&#xff1a;react-redux版本太低&#xff0c;至少要升级到7.2.3以后才能包含TypedUseSelectorHook…