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,一经查实,立即删除!

相关文章

Django使用fetch实现登录

Django使用session管理&#xff08;cookie&#xff09;实现了一个用户登录和会话保持功能。如果需求不太复杂可以使用Django默认的登录功能。 1 安装django-cors-headers 首先需要安装django-cors-headers pip install django-cors-headers2 在settings中配置 需要按照djan…

用Dockerfile和Shell脚本来部署一个Go项目

如何使用Dockerfile和Shell脚本来部署一个Go项目。这种方法能够帮助我们自动化构建、测试和部署流程&#xff0c;提高开发效率。 **一、项目结构和代码** 首先&#xff0c;我们需要准备一个Go项目。假设我们的项目结构如下&#xff1a; my-go-app/ ├── main.go ├── D…

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; 给大…

第三周:从错误中认识到管理

1. 约定两周时间&#xff0c;完成这个功能 在管理者分配好项目任务后&#xff0c;只是口头约定两周的时间&#xff0c;没有形成需求文档。对于需求&#xff0c;人与人的理解是不一样的&#xff0c;有些太过于抽象的东西&#xff0c;太难以描绘&#xff0c;只能一而再再而三的确…

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

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

vue3的proxy如何取代object和defineproperty

在 Vue 2.x 中&#xff0c;为了响应式地追踪对象属性的变化&#xff0c;Vue 使用了 Object.defineProperty 方法。但是&#xff0c;Object.defineProperty 有一些限制&#xff0c;比如它不能追踪属性的添加或删除&#xff0c;也不能直接用于数组或对象原型链上的属性。 Vue 3.…

【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…

Vue 父组件使用refs来直接访问和修改子组件的属性或调用子组件的方法

步骤 1: 在子组件中定义要被修改的属性或方法 首先&#xff0c;在子组件中定义你想要父组件能够修改或调用的属性或方法。例如&#xff0c;我们有一个名为MyChildComponent的子组件&#xff0c;它有一个名为childData的数据属性和一个名为updateData的方法。 // 子组件 MyChi…

国际版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…

如果返回的json 中有 ‘///’ 转换

// 将返回数据的三条/和替换空 rowData.Jsonobj rowData.Jsonobj .replace(/^\s*\/\/\/.*$/gm, //); // 将返回的替换成" 并且外面加个"" rowData.Jsonobj "${rowData.Jsonobj .replace(//g, ")}"; // 转换回来数据用两个 JSON.parse(JSON.par…

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.…