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

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

news 2025/12/20 2:20:49

第一步：创建项目

添加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

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/12/19 21:02:12

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/12/19 21:04:56

条件运算符

C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2025/11/9 11:32:13

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录一、目的二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结一、目的当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/12/19 21:20:31

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...

编程新知 2025/12/9 7:25:28

HDFS分布式存储 zookeeper

hadoop介绍狭义上hadoop是指apache的一款开源软件用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...

编程新知 2025/12/15 21:06:42