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

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

news 文章来源：https://blog.csdn.net/lianghecai52171314/article/details/132894018 2024/11/18 19:32:32

第一步：创建项目

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

【入门篇】ClickHouse 的安装与配置

文章目录 0. 前言ClickHouse的安装1. 添加 ClickHouse 的仓库2. 安装 ClickHouse3. 启动 ClickHouse 服务器4. 使用 ClickHouse 客户端 ClickHouse的配置 1. 详细安装教程1.1. 系统要求1.1. 可用安装包 {#install-from-deb-packages}1.1.1. DEB安装包1.1.1. RPM安装包 {#from-r…...

编程日记 2023/9/17 0:21:07

为了工作刷题

1.同步通信和异步通信有什么区别？UART、SPI和I2C分别属于什么类型的通信方式？ 同步通信：在同步通信中，发送方和接收方之间使用共享的时钟信号来同步数据传输。发送方按照时钟信号的边沿（上升沿或下降沿）将数…...

编程日记 2023/9/17 0:20:06

linux jenkins2.414.1-1.1版本安装

文章目录前言一、rpm文件下载二、安装jenkins2.1.升级jdk1.82.2安装jenkins2.3 启动服务2.4 使用密码登录2.5 修改插件源2.6 汉化插件安装演示总结前言之前也安装过jenkins，但是那个版本是2.1的，太老了很多插件都不支持，现在安装目前为止…...

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

嵌入式学习笔记（33）S5PV210的第二阶段处理过程

（1）第一个过程，怎么找到具体是哪个中断：S5PV210中因为支持的中断源很多，所以直接设计了4个中断寄存器，每个32位，每位对应一个中断源。（理论上210最多可以支持128个中断源&#xff0c…...

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

学校项目培训之Carla仿真平台之安装Carla

官网：http://carla.org/ 写在前面由于安装都写了很多东西，所以我单独将安装弄出来记录一下。如果你在安装9.12版本的时候遇到了很多问题，你可以考虑以下几点： - 楼梯可能不太行，需要更换，这是我实践得到的…...

编程日记 2023/9/17 0:17:03

什么是ＭＱ消息队列及四大主流ＭＱ的优缺点（个人网站复习搬运）

什么是ＭＱ消息队列及四大主流ＭＱ的优缺点小程序要上一个限时活动模块，需要有延时队列，从网上了解到用RabbitMQ可以解决，就了解了下 MQ 并以此做记录。一、为什么要用 MQ 核心就是解耦、异步和…...

编程日记 2023/9/17 0:16:02

Learn Prompt-什么是ChatGPT？

ChatGPT（生成式预训练变换器）是由 OpenAI 在2022年11月推出的聊天机器人。它建立在 OpenAI 的 GPT-3.5 大型语言模型之上，并采用了监督学习和强化学习技术进行了微调。 ChatGPT 是一种聊天机器人，允许用户与基于计算机的代理进行对…...

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

高德地图实现-微信小程序地图导航

效果图： 一、准备阶段 1、在高德开放平台注册成为开发者2、申请开发者密钥（key）。3、下载并解压高德地图微信小程序SDK 高德开放平台： 注册账号(https://lbs.amap.com/)) 申请小程序应用的 key 应用管理(https://console.ama…...

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

你已经应用了哪种服务注册和发现的模式呢？

前面历史文章中我们有说过关于微服务的注册和发现，并以 etcd 作为简单例子简单阐述了关于服务注册和发现的应用那么日常工作中，你已经使用了服务注册和发现的哪些模式呢？ 服务注册和发现的作用首先，简单说明一下服务注册和发…...

编程日记 2023/9/17 0:11:56

Python爬虫技术在SEO优化中的关键应用和最佳实践

大家好！今天我要和大家分享一个关于SEO优化的秘密武器：Python爬虫技术。在这篇文章中，我们将探讨Python爬虫在SEO优化中的关键应用和最佳实践。无论您是一名SEO专家、网站管理员，还是对优化网站曝光度感兴趣的初学者，都…...

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

广东网页制作网站/论坛如何做seo

裴波那切数在百度百科的定义是： 斐波那契数，亦称之为斐波那契数列（意大利语： Successione di Fibonacci)，又称黄金分割数列、费波那西数列、费波拿契数、费氏数列，指的是这样一个数列：0、1、1、…...

编程日记 2024/11/18 14:10:56

1如何做网站推广/html静态网页制作

10月10日，复旦大学Google Camp正式成立，李开复教授在成立仪式上发表了《21世纪所需要的7种人才》演讲，并回答了复旦同学7个“犀利”的问题，我们将在近期依次整理出这7个问答。一.开复如何评价谷歌的竞争对手——百度。复旦同学&am…...

编程日记 2024/11/18 6:57:08

怎么做提卡密网站万游/站长工具在线

有些银行推销的信用卡分期或贷款分期还款是这么计算的： A: 贷款额 x: 名义月利率或者所谓的每月手续费 m: 还款期限，单位月每月应还： (A x*A*m)/m 这个还款额把本金和利息平均在了每个月里， 但是仔细想想是有问题的： …...

编程日记 2024/11/18 4:52:03

自己做网站需要买什么/游戏推广论坛

一、Android Studio使用夜神模拟器进行调试开发： 1、首先打开Android Studio工具，然后再运行夜神模拟器 2、打开夜神模拟器bin运行目录（如cd D:\Nox\bin） 3、cmd执行命令：nox_adb.exe connect 127.0.0.1:62001&…...

编程日记 2024/11/18 2:52:48

上海网站建设服/google官网注册

“可以直接从中专升到本科吗？”不少人会有这种疑问，那这种情况可能吗？其实是不太现实的，大部分的中专生，一般都是因为学习成绩一般，只能一步一个脚印的慢慢提升自己的学历，从中专-大专-本科。之…...

编程日记 2024/11/18 0:08:01

虫虫wap建站源码/seo文章是什么

** 问题描述：**将一个2k2k单元格的棋盘用四种L型的图形进行完全覆盖(不能覆盖红色格子，不能发生重复覆盖)。** 思考：**1)如何能够让计算机实现这种算法？2)棋盘的大小为什么要为2k2k的单元格大小？任意的大小可以吗&…...

编程日记 2024/11/17 15:34:27