JWT简介 JWT结构 JWT示例 前端添加JWT令牌功能 后端程序

目录

1. JWT简述

1.1 什么是JWT

1.2 为什么使用JWT

1.3 JWT结构

1.4 验证过程

2. JWT示例

2.1 后台程序

2.2 前台加入jwt令牌功能


1. JWT简述

1.1 什么是JWT

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于认证,也可被加密。

JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案

1.2 为什么使用JWT

传统的intenet服务的认证是通过session进行的,当用户通过了安全认证后,则在服务端的session对象中保存该用户的认证信息,这样该用户对服务的访问被认为是安全的。这种模式的最大问题是没有分布式架构,不方便进行横向扩展,这种模式只适合于单体应用模式。如果需要进行服务集群则需要处理好共享session的问题。 如果一个庞大的系统需要按服务分解为多个独立的服务,使用分布式架构,则这种方式更难处理。使用jwt可以方便的处理上面提到的问题。

1.3 JWT结构

 

JWT头
JWT头部分是一个描述JWT元数据的JSON对象,通常如下所示。{"alg": "HS256","typ": "JWT"}。

有效载荷
有效载荷部分,是JWT的主体内容部分,也是一个JSON对象,包含需要传递的数据。这些声明被JWT标准称为claims。
例如:{"sub":"123","name":"Tom","admin":true},sub代表这个token的所有人,存储的是所有人的ID;name表示这个所有人的名字;admin表示所有人是否管理员的角色。当后面对JWT进行验证的时候,这些claim都能发挥特定的作用。
根据JWT的标准,这些claims可以分为以下三种类型:
A. Reserved claims(保留)
它的含义就像是编程语言的保留字一样,属于JWT标准里面规定的一些claim。JWT标准里面定义好的claim有:
iss (issuer):签发人
exp (expiration time):过期时间
sub (subject):主题
aud (audience):受众
nbf (Not Before):生效时间
iat (Issued At):签发时间
jti (JWT ID):编号

B. Public claims,略(不重要)

C. Private claims(私有)
这个指的就是自定义的claim,比如前面那个示例中的admin和name都属于自定的claim。这些claim跟JWT标准规定的claim区别在于:JWT规定的claim,JWT的接收方在拿到JWT之后,都知道怎么对这些标准的claim进行验证;而private claims不会验证,除非明确告诉接收方要对这些claim进行验证以及规则才行。
按照JWT标准的说明:保留的claims都是可选的,在生成payload不强制用上面的那些claim,你可以完全按照自己的想法来定义payload的结构,不过这样搞根本没必要:第一是,如果把JWT用于认证, 那么JWT标准内规定的几个claim就足够用了,甚至只需要其中一两个就可以了,假如想往JWT里多存一些用户业务信息,比如角色和用户名等,这倒是用自定义的claim来添加;第二是,JWT标准里面针对它自己规定的claim都提供了有详细的验证规则描述,每个实现库都会参照这个描述来提供JWT的验证实现,所以如果是自定义的claim名称,那么你用到的实现库就不会主动去验证这些claim。

signature
签名的作用是防篡改。签名是把header和payload对应的json结构进行base64url编码之后得到的两个串用英文句点号拼接起来,然后根据header里面alg指定的签名算法生成出来的。算法不同,签名结果不同。以alg: HS256为例来说明前面的签名如何来得到。照前面alg可用值的说明,HS256其实包含的是两种算法:HMAC算法和SHA256算法,前者用于生成摘要,后者用于对摘要进行数字签名。这两个算法也可以用HMACSHA256来统称

JWT实际结构示例:
eyJhbGciOiJIUzI1NiJ9. eyJzdWIiOiJ7fSIsImlzcyI6InpraW5nIiwiZXhwIjoxNTYyODUwMjM3LCJpYXQiOjE1NjI4NDg0MzcsImp0aSI6ImM5OWEyMzRmMDc4NzQyZWE4YjlmYThlYmYzY2VhNjBlIiwidXNlcm5hbWUiOiJ6c3MifQ. WUfqhFTeGzUZCpCfz5eeEpBXBZ8-lYg1htp-t7wD3I4

1.4 验证过程

客户端接收服务器返回的JWT,将其存储在Cookie或localStorage中,此后在于服务器的交互中都携带者JWT信息,它验证的方法其实很简单,只要把header做base64url解码,就能知道JWT用的什么算法做的签名,然后用这个算法,再次用同样的逻辑对header和payload做一次签名,并比较这个签名是否与JWT本身包含的第三个部分的串是否完全相同,只要不同,就可以认为这个JWT是一个被篡改过的串。

2. JWT示例

2.1 后台程序

1)将资料中src目录下的代码(CorsFilter.java,JwtFilter.java,JwtUtils.java)拷入项目的util目录下(可以根据项目设置的目录结构调整)。
2)程序的解释详见代码中的注释
3)在web.xml中配置JwtFilter过滤器
4)在用户登录验证成功后,需要为该用户生成jwt令牌,具体实现可参考UserAction.java
5)测试后台的验证服务,确定在验证通过的前提下可以正确的生成jwt令牌。

2.2 前台加入jwt令牌功能

1) 在store/state.js中加入jwt变量

//存放全局参数的容器,组件可以通过state.js获取全局参数
const state = {LeftAsideState: 'open',PersonName:'张飞',//存放jwt令牌jwt:null
}export default state

2)在store/mutations.js中加入设置jwt方法

  //设置JWT令牌setJwtToken: (state, payload) => {state.jwt = payload.jwt;}

3)在store/getters.js中加入获取jwt的方法

  //获取jwt令牌getJwtToken: function(state) {return state.jwt;}

4)修改main.js应用入口

//将vue实例赋给window.vm属性,以便于在http.js的响应拦截器和请求拦截器中获取vue实例
window.vm = new Vue({el: '#app',router,store,components: {App},template: '<App/>'
})

5)完善api/http.js中的请求拦截器和响应拦截器

// 请求拦截器
axios.interceptors.request.use(function(config) {//获取store中的jwt令牌,如果正常获取,将其放入请求头,//在调用后台服务时,服务会通过过滤器验证jwt令牌的有效性//如果没有令牌或令牌无效则拒绝服务。let jwt = window.vm.$store.getters.getJwtToken;if(jwt) {config.headers['jwt'] = jwt;}return config;
}, function(error) {return Promise.reject(error);
});// 响应拦截器
axios.interceptors.response.use(function(response) {//获取响应头中的jwt令牌数据(认证服务将生成的令牌放入header的jwt属性中)//如果获取到jwt令牌,在保存到store中,以后发送请求时需要将令牌放入请求头let jwt = response.headers['jwt'];if(jwt) {window.vm.$store.commit('setJwtToken',{jwt:jwt});}return response;
}, function(error) {return Promise.reject(error);
});

完毕,测试 

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

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

相关文章

通过创建自定义标签来扩展HTML

使用HTML时&#xff0c;例如&#xff0c;使用<b>标记显示粗体文本。 如果需要列表&#xff0c;则对每个列表项使用<ul>标记及其子标记<li> 。 标签由浏览器解释&#xff0c;并与CSS一起确定网页内容的显示方式以及部分内容的行为。 有时&#xff0c;仅使用一…

Power Apps-“编辑“窗体组件

插入一个“编辑”窗体 连接数据源 在该组件的Item函数中编辑筛选符合条件的唯一记录 LookUp(表名,列名值) LookUp参考文档&#xff1a;Filter、Search 和 LookUp 函数&#xff08;包含视频&#xff09; - Power Platform | Microsoft Learn 数据表里的数据就一一对应出现在了组…

【Redis】set常用命令集合间操作内部编码使用场景

文章目录 前置知识常见命令SADDSMEMBERSSISMEMBERSCARDSPOPSMOVESREM 集合间操作SINTERSINTERSTORESUNIONSUNIONSTORESDIFFSDIFFSTORE 命令小结内部编码测试内部编码 使用场景 前置知识 集合类型也是保存多个字符串类型的元素的&#xff0c;但和列表类型不同的是&#xff0c;在…

每日一题 2258. 逃离火灾(手撕困难!!!)

火会扩散&#xff0c;但是我们可以看作火不会扩散到已经着火的格子&#xff0c;这样我们就可以记录每一个为草地的格子的着火时间在代码中&#xff0c;因为数字 2 已经表示墙了&#xff0c;所以我们把当时间为 0 时着火的格子在 gird 中的值设为 3&#xff0c;时间为 1 时着火的…

公众号标签

公众号标签 本章节&#xff0c;讲解公众号标签的相关内容&#xff0c;支持对标签进行创建、查询、修改、删除等操作&#xff0c;也可以对用户进行打标签、取消标签等操作&#xff0c;对应 《微信公众号官方文档 —— 用户标签管理》 (opens new window)文档。 #1. 表结构 公众…

URI 和 URL 的区别

URI包括URL和URN两个类别&#xff0c;URL是URI的子集&#xff0c;所以URL一定是URI&#xff0c;而URI不一定是URL URI Universal Resource Identifier 统一资源标志符&#xff0c;用来标识抽象或物理资源的一个紧凑字符串。 通过使用位置&#xff0c;名称或两者来标识Interne…

5G毫米波通信中的关键技术

随着5G技术的快速发展&#xff0c;毫米波通信作为其中的一项重要技术&#xff0c;在高速数据传输、低延迟通信和大规模连接等方面具有显著的优势。本文将探讨5G毫米波通信中的关键技术&#xff0c;包括毫米波频段的选择、信号处理技术和MIMO技术等。 一、毫米波频段的选择 毫米…

pytest + yaml 框架 -58.运行报告总结summary.json

前言 用例运行结束后&#xff0c;在本地生成summary.json 文件&#xff0c;总结运行结果。 v1.5.1版本更新内容&#xff1a; 1.解决参数化&#xff0c;中文在控制台输出问题 2.保存用例结果summary.json 保存用例结果summary.json 命令行执行用例 pytest运行结束&#xff0…

使用OkHttp库爬取百度云视频详细步骤

目录 摘要 一、OkHttp库简介 二、爬虫基本概念 三、使用OkHttp库爬取百度云视频 1、发送HTTP请求 2、处理响应 3、下载文件 四、可能遇到的问题及解决方案 五、注意事项 总结与建议 摘要 本文将详细介绍如何使用OkHttp库爬取百度云视频。文章首先简要介绍OkHttp库和…

一分钟带你了解易货:来龙去脉,古往今来

原始社会&#xff0c;没有货币&#xff0c;人类没有货币&#xff0c;用捕猎来的兽皮换取需要的野果&#xff0c;用一头羊换几只鸡&#xff0c;等等之类&#xff0c;都属于最早的交换。那个时候&#xff0c;人类没有价值的定义&#xff0c;属于最原始的交换。 直到私有制的形成&…

算法秘籍-王一博 | 数据结构与算法

⭐简单说两句⭐ 作者&#xff1a;后端小知识 CSDN个人主页&#xff1a;后端小知识 &#x1f50e;GZH&#xff1a;后端小知识 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 数据结构和算法是计算机科学的基石&#xff0c;是计算机的灵魂&…

web3案例中解决交易所中 ETH与token都是0问题 并帮助确认展示是否成功

可能写了这么久 很多人会发现一个问 我们前面的案例 个人在交易所中的 自定义token 和 ETH 一直是放了个0 大家也不太敢确认是否真的有效 那么 很简单 我们操作 存入一些进交易所 不就ok了 我们 来看之前交易所写的代码 我们写了 depositEther 存入 ETH 和 depositToken 存入…

开发知识点-NodeJs-npm/Pnpm/Vite/Yarn包管理器

包管理器 vue-cli-service 不是内部或外部命令&#xff0c;也不是可运行的程序npm 全局变量pnpmPnpm介绍ViteYarn ‘vue-cli-service’ 不是内部或外部命令&#xff0c;也不是可运行的程序 yarn yarn add vue-amap yarn add vue-amap ant-design-vue npm 全局变量 换主机 新…

Spring笔记(三)(Spring整合web环境)

01、Spring整合web环境 1.1 Javaweb三大组件及环境特点 在Java语言范畴内&#xff0c;web层框架都是基于Javaweb基础组件完成的&#xff0c;所以有必要复习一下Javaweb组件的特点 组件作用特点Servlet服务端小程序&#xff0c;负责接收客户端请求并作出响应的单例对象&#…

中国第二批,11个大模型备案获批

加上首批的 10 余个大模型&#xff0c;目前已有超过 20 个大模型获得审批。 据钛媒体独家报道&#xff0c;国内第二批通过备案的AI大模型包括11家公司&#xff0c;部分已面向全社会开放服务。加上首批的10余个大模型&#xff0c;目前已有超过20个大模型获得备案。 新一批备案…

JAVASSMmysql面向高校校园体育用品租借管理系统94593-计算机毕业设计项目选题推荐(附源码)

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;微信小程序的面向高校校园体育用品租借管理系统被用户普遍…

微信小程序使用阿里巴巴矢量图标

一&#xff0c;介绍 微信小程序使用图标有两种方式&#xff0c;一种是在线获取&#xff0c;一种是下载到本地使用&#xff0c; 第一种在线获取的有个缺点就是图标是灰色的&#xff0c;不能显示彩色图标&#xff0c;而且第一种是每次请求资源的&#xff0c;虽然很快&#xff0…

2023亚太杯数学建模C题思路分析

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料5 最后 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 2023年第十三…

超好用!在线即可制作电子产品图册

​电子产品图册是展示产品特点、功能和外观的重要方式之一。通过图册&#xff0c;可以让客户更好地了解产品&#xff0c;增强信任感&#xff0c;从而促进销售。同时&#xff0c;对于企业来说&#xff0c;制作精美的电子产品图册也是展示企业文化和品牌形象的重要手段之一。 一、…

AP2005SPER 低噪声4.5A升压电流模式PWM转换器 最高可达9V 适用于升压5V/9V 大电流

AP2005 是电流模式 DC-DC 升压转换器。它是内置 0.05Q 功率 MOSFET 的 PWM 电路使转换器高效率。内部补偿电路也减少多达 6 个外部器件。误差放大器的同相输入端连接到一个精准的 0.6V基准电压。内部软启动功能&#xff0c;可降低浪涌电流AP2005 适应于 SOP8-PP 封装&#xff0…