json web token及JWT学习与探索

JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案

作用:

主要是做鉴权用的登录之后存储用户信息

生成得token(令牌)如下

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjg3Njc0NDkyLCJleHAiOjE2ODc3NjA4OTJ9.Y6eFGv4KXqUhlRHglGCESvcJEnyMkMwM1WfICt8xYC4

JWT的组成部分:

Header(头部): token(令牌)的类型(即 “JWT”)和所使用的签名算法。头部通常采用 JSON 对象表示,并进行 Base64 URL 编码。

  • 组成部分:
    • alg属性表示签名的算法(algorithm),默认是 HMAC SHA256(写成 HS256);
    • typ属性表示这个令牌(token)的类型(type)
{"alg": "HS256","typ": "JWT"
}

Payload(负载): Payload 部分也是一个 JSON 对象,用来存放实际需要传递的数据。例如用户的身份、权限等。负载也是一个 JSON 对象,同样进行 Base64 URL 编码。

{"exp": 1024945200,"sub": "1234567890","username": "Tom"
}

JWT 规定了7个官方字段,供选用,具体如下:

  • iss (issuer):签发人
  • exp (expiration time):过期时间
  • sub (subject):主题
  • aud (audience):受众
  • nbf (Not Before):生效时间
  • iat (Issued At):签发时间
  • jti (JWT ID):编号

Signature(签名): Signature 部分是对前两部分的签名,防止数据篡改,需要指定一个密钥(secret)。这个密钥只有服务器才知道,不能泄露给用户。然后,使用 Header 里面指定的签名算法(默认是 HMAC SHA256),用大白话来说就是:签名是使用私钥对头部和负载进行加密的结果。它用于验证令牌的完整性和真实性。

 HMACSHA256(base64UrlEncode(header) + "." +base64UrlEncode(payload),mySetKey)

算出签名以后,把 Header、Payload、Signature 三个部分拼成一个字符串,每个部分之间用"点"(.)分隔,就可以返回给用户。

搭建一个后端项目:

使用express进行搭建

  • 安装
pnpm i express
pnpm i jsonwebtoken
pnpm i cors
import express from 'express';
import jwt from 'jsonwebtoken';//引入JWT的包
import cors from 'cors';//防止跨域
const app = express();
const mySetKey= 'mycode' //密钥app.use(express.urlencoded({ extended: false }));// URL 处理编码问题
app.use(express.json());// JSON处理格式数据的中间件
app.use(cors())let user = { name: 'admin', password: '123456', id: 1 } //模拟用户账号密码和idapp.post('/api/login', (req, res) => {//登录接口console.log(req.body)//判断客户端传入的和数据库存储的是否一致if (req.body.name == user.name && req.body.password == user.password) {res.json({message: '登录成功',code: 200,token: jwt.sign({ id: user.id }, mySetKey, { expiresIn: 60 * 60 * 24 }) // jwt.sign使用JWT根据用户id和密钥 生成token  mySetKey密钥 expiresIn设置失效时间})} else {res.json({message: '登录失败',code: 400})}
})// /api/list 验证密钥是否失效 没失效则返回对应的数据给客户端
app.get('/api/list', (req, res) => {console.log(req.headers.authorization)// JWT 根据mySetKey秘钥验证token的有效性 jwt.verify(req.headers.authorization as string, mySetKey, (err, data) => { //验证tokenif (err) {res.json({message: 'token失效',code: 403})} else {res.json({message: '获取列表成功',code: 200,data: [{ name: '张三', age: 18 },{ name: '李四', age: 20 },]})}})
})app.listen(3000, () => {console.log('server is running 3000');
})

前端代码

在前端文件中新建两个文件,分别是index.html和listPage.html
index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><div><span>账号</span> <input id="name" type="text"></div><div><span>密码</span> <input id="password" type="password"></div><button id="btn">登录</button></div><script>const btn = document.querySelector('#btn')const name = document.querySelector('#name')const password = document.querySelector('#password')btn.onclick = () => {fetch('http://localhost:3000/api/login', {body: JSON.stringify({name: name.value,password: password.value}),headers: {'Content-Type': 'application/json'},method: 'POST',}).then(res => res.json()).then(res => {localStorage.setItem('token', res.token)location.href = './listPage.html'})}</script>
</body></html>

listPage.html 如果没有token就访问不了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>List</title>
</head><body><script>console.log(localStorage.getItem('token'))fetch('http://localhost:3000/api/list', {headers: {'Authorization':`Bearer ${localStorage.getItem('token')}`}}).then(res => res.json()).then(res => {console.log(res)})</script>
</body></html>

原理图如下:

在这里插入图片描述

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

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

相关文章

1107 老鼠爱大米

solution 记录每组的最大值&#xff0c;并比较组间的最大值胖胖鼠~ #include<iostream> using namespace std; int main(){int n, m, ans, fat -1, x;scanf("%d%d", &n, &m);for(int i 0; i < n; i){ans -1;for(int j 0; j < m; j){scanf(…

【C/C++】Makefile文件的介绍与基本用法

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

【论文复现】LSTM长短记忆网络

LSTM 前言网络架构总线遗忘门记忆门记忆细胞输出门 模型定义单个LSTM神经元的定义LSTM层内结构的定义 模型训练模型评估代码细节LSTM层单元的首尾的处理配置Tensorflow的GPU版本 前言 LSTM作为经典模型&#xff0c;可以用来做语言模型&#xff0c;实现类似于语言模型的功能&am…

【Torch学习笔记】

作者&#xff1a;zjk 和 的区别是逐元素相乘&#xff0c;是矩阵相乘 cat stack 的区别 cat stack 是用于沿新维度将多个张量堆叠在一起的函数。它要求所有输入张量具有相同的形状&#xff0c;并在指定的新维度上进行堆叠。

【NumPy】关于numpy.mean()函数,看这一篇文章就够了

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

Android11热点启动和关闭

Android官方关于Wi-Fi Hotspot (Soft AP) 的文章&#xff1a;https://source.android.com/docs/core/connect/wifi-softap?hlzh-cn 在 Android 11 的WifiManager类中有一套系统 API 可以控制热点的开和关&#xff0c;代码如下&#xff1a; 开启热点&#xff1a; // SoftApC…

国际版Tiktok抖音运营流量实战班:账号定位/作品发布/热门推送/等等-13节

课程目录 1-tiktok账号定位 1.mp4 2-tiktok作品发布技巧 1.mp4 3-tiktok数据功能如何开通 1.mp4 4-tiktok热门视频推送机制 1.mp4 5-如何发现热门视频 1.mp4 6-如何发现热门音乐 1.mp4 7-如何寻找热门标签 1.mp4 8-如何寻找垂直热门视频 1.mp4 9-如何发现热门挑战赛 1…

【Python特征工程系列】一文教你使用PCA进行特征分析与降维(案例+源码)

这是我的第287篇原创文章。 一、引言 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是一种常用的降维技术&#xff0c;它通过线性变换将原始特征转换为一组线性不相关的新特征&#xff0c;称为主成分&#xff0c;以便更好地表达数据的方差。 在特征重要…

DAMA数据管理知识体系必背18张框图

近期对数据管理知识体系中比较重要的框图进行了梳理总结,总共有18张框图,供大家参考。主要涉及数据管理、数据治理阶段模式、数据安全需求、主数据管理关键步骤,主数据架构、DW架构、数据科学的7个阶段、数据仓库建设活动、信息收敛三角、大数据分析架构图、数据管理成熟度等…

QGIS开发笔记(二):Windows安装版二次开发环境搭建(上):安装OSGeo4W运行依赖其Qt的基础环境Demo

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139136356 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

Charles抓包App_https_夜神模拟器

Openssl安装 下载安装 下载地址&#xff1a; http://slproweb.com/products/Win32OpenSSL.html 我已经下载好了64位的&#xff0c;也放出来&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Nkur475YK48_Ayq_vEm99w?pwdf4d7 提取码&#xff1a;f4d7 --来自百度网…

地下城游戏(leetcode)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 地下城游戏https://leetcode.cn/problems/dungeon-game/description/ 图解分析&#xff1a; 代码 class Solution { public:int calculateMinimumHP(vector<vector<int>>& vv) {int row vv.size(), col …

Zookeeper 安装教程和使用指南

一、Zookeeper介绍 ZooKeeper 是 Apache 软件基金会的一个开源项目&#xff0c;主要基于 Java 语言实现。 Apache ZooKeeper 是一个开源的分布式应用程序协调服务&#xff0c;提供可靠的数据管理通知、数据同步、命名服务、分布式配置服务、分布式协调等服务。 关键特性 分布…

Nginx实战(安装部署、常用命令、反向代理、负载均衡、动静分离)

文章目录 1. nginx安装部署1.1 windows安装包1.2 linux-源码编译1.3 linux-docker安装 2. nginx介绍2.1 简介2.2 常用命令2.3 nginx运行原理2.3.1 mater和worker2.3.3 Nginx 的工作原理 2.4 nginx的基本配置文件2.4.1 location指令说明 3. nginx案例3.1 nginx-反向代理案例013.…

数据结构和算法|排序算法系列(三)|插入排序(三路排序函数std::sort)

首先需要你对排序算法的评价维度和一个理想排序算法应该是什么样的有一个基本的认知&#xff1a; 《Hello算法之排序算法》 主要内容来自&#xff1a;Hello算法11.4 插入排序 插入排序的整个过程与手动整理一副牌非常相似。 我们在未排序区间选择一个基准元素&#xff0c;将…

移动云以深度融合之服务,令“大”智慧贯穿云端

移动云助力大模型&#xff0c;开拓创新领未来。 云计算——AI模型的推动器。 当前人工智能技术发展的现状和趋势&#xff0c;以及中国在人工智能领域的发展策略和成就。确实&#xff0c;以 ChatGPT 为代表的大型语言模型在自然语言处理、文本生成、对话系统等领域取得了显著的…

项目管理:敏捷实践框架

一、初识敏捷 什么是敏捷(Agile)?敏捷是思维方式。 传统开发模型 央企,国企50%-60%需求分析。整体是由文档控制的过程管理。 传统软件开发面临的问题: 交付周期长:3-6个月甚至更长沟通效果差:文档化沟通不及时按时发布低:技术债增多无法发版团队士气弱:死亡行军不关注…

Vmware 17安装 CentOS9

前言 1、提前下载好需要的CentOS9镜像&#xff0c;下载地址&#xff0c;这里下载的是x86_64 2、提前安装好vmware 17&#xff0c;下载地址 &#xff0c;需要登录才能下载 安装 1、创建新的虚拟机 2、在弹出的界面中选择对应的类型&#xff0c;我这里选择自定义&#xff0c;点…

python command乱码怎么解决

python command乱码怎么解决&#xff1f;具体方法如下&#xff1a; 先引入import sys 再加一句&#xff1a;typesys.getfilesystemencoding() 然后在输出乱码的数据的后面加上“.decode(utf-8).encode(type)”。 比如输入“ss”乱码。 就写成print ss.decode(utf-8).encode(typ…

【话题】AIGC行业现在适合进入吗

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言AIGC的发展阶段市场需求时机是否合适优势挑战 文章推荐 引言 在撰写关于当前是否适合进入AIGC&#xff08;人工智能生成内容&#xff09;行业的文章之前&#xff0…