当前位置：首页 > news >正文

JWT生成与解析/JWT令牌前端存储

news 2025/9/14 15:52:20

第一步：创建项目

添加Maven依赖：

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version>
</dependency>
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.2</version>
</dependency>
<dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-impl</artifactId><version>0.11.2</version><scope>runtime</scope>
</dependency>
<dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-jackson</artifactId><version>0.11.2</version><scope>runtime</scope>
</dependency>
<!--        集成Thymeleaf-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency><groupId>net.sourceforge.nekohtml</groupId><artifactId>nekohtml</artifactId><version>1.9.22</version>
</dependency>

在resources/static目录下创建js文件夹，然后在其中添加jquery3.3.1.js文件

在这里插入图片描述

编辑application.yml：

server:port: 80servlet:context-path: /jwt
spring:thymeleaf:#前缀，也就是模板存放的路径prefix: classpath:/templates/#编码格式encoding: UTF-8check-template-location: false#关闭缓存，不然无法看到实时页面cache: false#后缀suffix: .html#设置不严格的htmlmode: HTMLservlet:content-type: text/html

第二步：创建表示用户的实体类：

@Getter
@Setter
@ToString
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {private static final long serialVersionUID = -8390887042859558153L;private Integer id;private String username;private String password;
}

第三步：创建常量类：

public interface JwtConst {//JWT签发者String JWT_ID = "098f6bcd4621d373cade4e832627b4f6";// 密钥, 经过Base64加密, 可自行替换String JWT_SECRECT = "MDk4ZjZiY2Q0NjIxZD";// 过期时间，单位毫秒int JWT_TTL = 60*60*1000;
}

第四步：Jwt工具类：

public class JwtUtil {private static Key key =  Keys.secretKeyFor(SignatureAlgorithm.HS256);public static String createJWT(String id, String subject, int ttl) {Calendar calendar = Calendar.getInstance();JwtBuilder builder = Jwts.builder().setId(id)  //JWT唯一标识.setIssuedAt(calendar.getTime()) //签发时间.setSubject(subject) //JWT的主题，比如JSON类型的User对象.signWith(key);calendar.add(Calendar.MINUTE, ttl); // ttl过期时间，单位分钟builder.setExpiration(calendar.getTime()); //过期时间return builder.compact();}public static Claims parseJwt(String jwt){Claims claims = Jwts.parserBuilder().setSigningKey(key)
.build().parseClaimsJws(jwt).getBody();return claims;}public static String createSubject(User user){return JSON.toJSONString(user);}
}

第五步：创建表示服务器端返回结果的类：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result<T> {private int code;private String msg;private T data;public Result(int code, String msg) {this.code = code;this.msg = msg;}
}

第六步：创建Controller：

生成、解析JWT的Controller

@Controller
@RequestMapping("/jwt")
public class JWTController {@RequestMapping("/login")@ResponseBodypublic Result<String> login(String username, String password) {if (username == null || password == null) {return new Result<String>(789, "用户名或密码不正确", null);}User user = new User(1001, username, password);String jwt = JwtUtil.createJWT(JwtConst.JWT_ID, 
JwtUtil.createSubject(user), JwtConst.JWT_TTL);System.out.println(jwt);return new Result<>(200, "请求成功！", jwt);}@RequestMapping("/parseJwt")@ResponseBodypublic User parseJwt(HttpServletRequest request) {String jwt = request.getHeader("Authorization");String token = JSON.parseObject(jwt).getString("token");Claims claims = JwtUtil.parseJwt(token);String subject = claims.getSubject();User user = JSON.parseObject(subject, User.class);System.out.println(user);return user;}
}

页面分发的Controller：

@Controller
public class DispatchController {@GetMapping("/login")public String showLogin(){return "/login";}@GetMapping("/showJwt")public String showJwt(){return "showJwt";}@GetMapping("/index")public String index(){return "index";}
}

第七步：前端页面：

login.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title><script src="js/jquery3.5.1.js" type="text/javascript"></script></head><body><form id="loginForm"><input type="text" name="username" value="zhangsan"><br><input type="password" name="password" value="123456"></form><button id="btn">登录</button><script>$(function () {$("#btn").click(function () {$.ajax({type: "POST",//请求方式url: "jwt/login",  //请求地址dataType: "JSON", //预期服务器端返回的数据的类型data: $("#loginForm").serialize(),//数据，json字符串success: function (result) { //请求成功console.log(result);if (result.code == 200) {//获取令牌并保存到本地localStorage.setItem("token", '{"token":"' + result.data + '"}');}if (result.code == 789) {window.location = "login";}},error: function (e) {  //请求失败，包含具体的错误信息console.log(e.status);console.log(e.responseText);}});});});</script></body>
</html>

注：第一次点登录按钮时，无法将token数据保存在Application中，原因未找到，发现原因的朋友麻烦告诉我一声。

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>首页</title><script src="js/jquery3.3.1.js" type="text/javascript"></script></head><body>首页启动时请求后台的解析Jwt的的请求<div id="sh"></div><script>$(function () {$.ajax({url: "jwt/parseJwt",headers: {Authorization: localStorage.getItem("token")},success:function (res) {console.info(res);$("#sh").text(JSON.stringify(res));}})});</script></body>
</html>

第八步：部署运行查看结果：

访问http://localhost/jwt/login，在打开的login.html页面中单击登录按钮：

注：第一次点登录按钮时，无法将token数据保存在Application中，原因未找到。
2. 访问http://localhost/jwt/index，在页面上会看到：
在这里插入图片描述

JWT生成与解析/JWT令牌前端存储

第一步：创建项目添加Maven依赖： <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version> </dependency> <dependency><groupId>org.s…...

编程日记 2023/9/17 1:00:45

[交互]前端展示服务端获取的图片

可以通过以下步骤从服务端获取图片： 引入axios库：在前端代码中使用axios库来发送HTTP请求。可以通过以下方式引入axios： import axios from axios;发送请求：使用axios发送HTTP请求，获取图片文件的二进制数据。发送请求…...

编程日记 2023/9/17 0:59:43

LeetCode2.两数相加

一看完题，我的想法是先算出这两个链表表示的数，然后相加，然后把这个数一位一位的分配给第三个数组，这种方法应该很简单但是要遍历三次数组，于是我就想直接一遍遍历，两个链表同时往后面遍历，把这…...

编程日记 2023/9/17 0:54:39

Linux编译过程与交叉编译

一.GCC由来 GCC（GNU编译器套件）是一个自由开源的编程工具集，用于编译和链接C、C和其他编程语言的程序。它由理查德斯托曼（Richard Stallman）和其他自由软件基金会（Free Software Foundation）的…...

编程日记 2023/9/17 0:51:37

MediaPipe+OpenCV 实现实时手势识别（附Python源码）

MediaPipe官网：https://developers.google.com/mediapipe MediaPipe仓库：https://github.com/google/mediapipe 一、MediaPipe介绍 MediaPipe 是一个由 Google 开发的开源跨平台机器学习框架，用于构建视觉和感知应用程序。它提供了一系列预训…...

编程日记 2023/9/17 0:49:34

为什么选择C/C++内存检测工具AddressSanitizer？如何使用AddressSanitizer？

目录 1、C程序中的内存问题 2、AddressSanitizer是什么？ 3、AddressSanitizer内存检测原理简述 3.1、内存映射 3.2、插桩 4、为什么选择AddressSanitizer？ 4.1、Valgrind介绍 4.2、AddressSanitizer在速度和内存方面为什么明显优于Valgrind 4.3…...

编程日记 2023/9/17 0:48:34

获取vue当前页面url问号后面的参数

除了使用 window.location.search 或 Vue Router 的 $route.query 来获取 URL 问号后面的参数之外，您还可以使用 JavaScript 中的正则表达式来解析 URL 中的参数部分。以下是一个示例： // 获取当前页面的完整 URL const currentURL window.location.hre…...

编程日记 2023/9/17 0:44:31

Linux编程之线程池的设计与实现

Linux编程之线程池的设计与实现（C98） 代码假设服务器的硬件资源“充裕”，那么提高服务器性能的一个很直接的方法就是空间换时间， 即“浪费”服务器的硬件资源，以换取其运行效率。提升服务器性能的一个重要方法就是…...

编程日记 2023/9/17 0:42:28

stm32---定时器输入捕获

一、输入捕获介绍在定时器中断实验章节中我们介绍了通用定时器具有多种功能，输入捕获就是其中一种。 STM32F1除了基本定时器TIM6和TIM7，其他定时器都具有输入捕获功能。输入捕获可以对输入的信号的上升沿，下降沿或者双边沿进行捕获&#xf…...

编程日记 2023/9/17 0:40:26

打造生产级Llama大模型服务

对于任何想要尝试人工智能或本地LLM，又不想因为意外的云账单或 API 费用而感到震惊的人，我可以告诉你我自己的旅程是如何的，以及如何开始使用廉价的消费级硬件执行Llama2 推理。这个项目一直在以非常活跃的速度发展，这使得它非…...

编程日记 2023/9/17 0:39:25

Acwing 828. 模拟栈

Acwing 828. 模拟栈题目要求思路讲解代码展示题目要求思路讲解栈：先进后出队列：先进先出代码展示 #include <iostream>using namespace std;const int N 100010;int m; int stk[N], tt;int main() {cin >> m;while (m -- ){string o…...

编程日记 2023/9/17 0:38:24

初识Docker

文章目录 Docker安装Docker简介1.什么是虚拟化、容器化?2. 为什么需要虚拟化、容器化？3. 虚拟化的实现方式主机虚拟化的实现方式容器虚拟化实现 4. 虚拟机和Docker的区别 Docker安装基于Centos7进行安装 1.确认系统版本和CPU架构，Centos7的x86_64架构…...

编程日记 2023/9/17 0:37:23

HTTPS Tomcat Servlet 博客系统软件测试的概念 Linux

第 1 题（多选题） 题目名称： 以下关于http和https说法正确的是题目内容： A .http是超文本传输协议 B .https是超文本传输安全协议 C .http是明文传输 D .https是加密传输第 2 题（单选题） 题目名称…...

编程日记 2023/9/17 0:33:19

云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作...

编程日记 2023/9/17 0:31:18

文章目录 CBMRMultiCBMRSample Weight Assignment多任务推荐模型 CBMR MultiCBMR Sample Weight Assignment Click-aware Structure Transfer with Sample Weight Assignment for Post-Click Conversion Rate Estimation 每个用户的top-k 邻居每个商品的top-k 邻居平滑处理并构…...

编程日记 2023/9/17 0:29:15

长城网络靶场第三题

关卡描述：1.oa服务器的内网ip是多少？ 先进行ip统计，开始逐渐查看前面几个ip 基本上都是b/s，所以大概率是http，过滤一下ip 第一个ip好像和oa没啥关系第二个ip一点开就是 oa，应该就是他了。关卡描述&a…...

编程日记 2023/9/17 0:28:14

Java“牵手”虾皮商品列表页数据采集+虾皮商品价格数据排序，虾皮API接口申请指南

虾皮商城是一个在线电子商务平台，总部设在新加坡，隶属于Sea Limited（冬海集团，简称为Sea）。虾皮商城于2015年在新加坡成立以来，业务范围辐射新加坡、马来西亚、菲律宾、泰国、越南、巴西等10余个市场1。拥有…...

编程日记 2023/9/17 0:27:13

Pyspark综合案例（pyspark安装和java运行环境配置）

一、RDD对象 PySpark支持多种数据的输入，在输入完成后，都会得到一个：RDD类的对象 RDD全称为：弹性分布式数据集（Resilient Distributed Datasets） PySpark针对数据的处理，都是以RDD对象作为载…...

编程日记 2023/9/17 0:25:12

虚拟机突然无法访问外部网络的现象集合

现场还原虚拟机突然无法访问外部网络 ping 8.8.8.8的时候显示网络不可达 ping 8.8.8.8ping www.baidu.com（报：未知的名称或服务或请求超时） ping www.baidu.comyum操作也提示错误：为仓库 ‘appstream’ 下载元数据失败 : C…...

编程日记 2023/9/17 0:24:10

国庆中秋特辑（一）浪漫祝福方式用循环神经网络（RNN）或长短时记忆网络（LSTM）生成祝福诗词

目录一、使用深度学习中的循环神经网络（RNN）或长短时记忆网络（LSTM）生成诗词二、优化：使用双向 LSTM 或 GRU 单元来更好地捕捉上下文信息三、优化：使用生成对抗网络（GAN）或其他技术…...

编程日记 2023/9/17 0:23:09

Spark 之入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...

编程新知 2025/9/14 12:21:33

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/9/9 10:13:07

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...

编程新知 2025/8/21 15:41:11

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/8/10 22:32:47

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...

编程新知 2025/9/9 10:10:46

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/8/16 15:34:02

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51