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

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

news 2025/7/6 3:57:27

第一步：创建项目

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2025/7/5 21:21:44

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2025/7/4 2:40:04

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/6/20 18:06:08

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/6/21 6:25:06