双Token方案实现Token自动续期(基于springboot+vue前后端分离项目)

文章目录

  • 前言
  • 一、双Token方案介绍
    • 1. 令牌类型与功能
    • 2.双Token方案的优点
    • 3.实现流程
  • 二、具体实现
    • 1.后端实现
      • 1.1 jwt工具类
      • 1.2 响应工具类
      • 1.3 实体类
      • 1.4 过滤器
      • 1.5 controller
      • 1.6 启动类
    • 2、前端实现
      • 2.1 登录页面
      • 2.2 index页面
      • 2.3 请求拦截器和响应拦截器
  • 效果展示


前言

更多jwt相关文章:
jwt理论介绍
springboot+vue项目中使用jwt实现登录认证

本篇文章的代码是在springboot+vue项目中使用jwt实现登录认证的基础上实现的Token自动续期的功能。


一、双Token方案介绍

双token解决方案是一种用于增强用户登录安全性和提升用户体验的认证机制。它主要涉及两个令牌:访问令牌(accessToken)和刷新令牌(refreshToken)。以下是对双token解决方案的详细介绍:

1. 令牌类型与功能

  • 访问令牌(accessToken):
    有效期较短,通常设置为较短的时间,如两小时或根据业务需求自定义(如10分钟)。 储存用户信息权限等,包含用户相关信息,如UserID、Username等。 用于前端与后端之间的通信认证,前端在每次请求时携带此令牌进行校验。
  • 刷新令牌(refreshToken):
    有效期较长,可以设置为一星期、一个月或更长时间,具体根据业务需求自定义。 不储存额外信息,只储存用户id,用于在accessToken过期后重新生成新的accessToken。 由于有效期长,因此降低了用户需要频繁登录的频率。
  • 2.双Token方案的优点

  • 增强安全性:通过短期有效的accessToken和长期有效的refreshToken的结合,即使accessToken泄露,攻击者也只能在有限时间内进行模拟用户行为,降低了安全风险。
  • 提升用户体验:由于refreshToken的存在,用户无需频繁登录,特别是在长时间操作或后台服务场景下,提高了用户体验。
  • 3.实现流程

  • 登录:用户输入用户名和密码进行登录,后端验证成功后生成accessToken和refreshToken,并发送给前端。
  • 请求校验:前端在每次请求时携带accessToken进行校验,如果accessToken有效,则允许请求继续;如果无效但refreshToken有效,则使用refreshToken重新生成accessToken。
  • 令牌刷新:当accessToken过期但refreshToken未过期时,前端可以使用refreshToken向后端请求新的accessToken,无需用户重新登录。
  • 登出:用户登出时,后端需要同时使accessToken和refreshToken失效,以确保用户登出后的安全性。
  • 二、具体实现

    1.后端实现

    1.1 jwt工具类

    package com.etime.util;import io.jsonwebtoken.*;import java.util.Date;
    import java.util.Map;
    import java.util.UUID;/*** @Date 2024/6/10 10:04* @Author liukang**/
    public class JwtUtil {
    //    private static long expire = 1000*60*5;// 单位是毫秒private static String secret = "secret";/*** 创建jwt* @author liukang* @date 10:36 2024/6/10* @param expire* @param map* @return java.lang.String**/public static String generateToken(long expire, Map map){// 床jwt构造器JwtBuilder jwtBuilder = Jwts.builder();// 生成jwt字符串String jwt = jwtBuilder//头部.setHeaderParam("typ","JWT").setHeaderParam("alg","HS256")// 载荷.setClaims(map) // 设置多个自定义数据  位置只能放在前面,如果放在后面,那前面的载荷会失效.setId(UUID.randomUUID().toString())// 唯一标识.setIssuer("liukang")// 签发人.setIssuedAt(new Date())// 签发时间.setSubject("jwtDemo")// 主题.setExpiration(new Date(System.currentTimeMillis()+expire))//过期时间// 自定义数据
    //                .claim("uname","liukang")// 签名.signWith(SignatureAlgorithm.HS256,secret).compact();return jwt;}/*** 创建jwt* @author liukang* @date 10:36 2024/6/10* @param expire* @return java.lang.String**/public static String generateToken(long expire){// 床jwt构造器JwtBuilder jwtBuilder = Jwts.builder();// 生成jwt字符串String jwt = jwtBuilder//头部.setHeaderParam("typ","JWT").setHeaderParam("alg","HS256")// 载荷.setId(UUID.randomUUID().toString())// 唯一标识.setIssuer("liukang")// 签发人.setIssuedAt(new Date())// 签发时间.setSubject("jwtDemo")// 主题.setExpiration(new Date(System.currentTimeMillis()+expire))//过期时间// 自定义数据
    //                .claim("uname","liukang")// 签名.signWith(SignatureAlgorithm.HS256,secret).compact();return jwt;}/*** 解析jwt* @author liukang* @date 10:36 2024/6/10* @param jwt* @return io.jsonwebtoken.Claims**/public static Claims parseToken(String jwt){Jws<Claims> claimsJws = Jwts.parser().setSigningKey(secret).parseClaimsJws(jwt);Claims playload = claimsJws.getBody();return playload;}
    }

    1.2 响应工具类

    代码如下(示例):

    package com.etime.util;import com.etime.vo.ResponseModel;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import org.springframework.http.MediaType;import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;/*** @Date 2024/6/10 10:00* @Author liukang**/
    public class ResponseUtil {public static void write(ResponseModel rm, HttpServletResponse response) throws IOException {// 构造响应头response.setContentType(MediaType.APPLICATION_JSON_VALUE);response.setCharacterEncoding("utf-8");// 解决跨域问题 设置跨域头response.setHeader("Access-Control-Allow-Origin","*");// 输出流PrintWriter out = response.getWriter();// 输出out.write(new ObjectMapper().writeValueAsString(rm));// 关闭流out.close();}
    }

    1.3 实体类

    登录用户实体类

    package com.etime.entity;import lombok.Data;/*** @Date 2024/6/10 10:39* @Author liukang**/
    @Data
    public class User {private String username;private String password;
    }

    响应vo类

    package com.etime.vo;import lombok.Data;import java.util.Objects;/*** @Date 2024/6/10 10:37* @Author liukang**/
    @Data
    public class ResponseModel {private Integer code;private String msg;private Object token;public ResponseModel(Integer code, String msg, Object token) {this.code = code;this.msg = msg;this.token = token;}
    }

    1.4 过滤器

    package com.etime.filter;import com.etime.util.JwtUtil;
    import com.etime.util.ResponseUtil;
    import com.etime.vo.ResponseModel;
    import com.sun.deploy.net.HttpResponse;
    import org.springframework.http.HttpMethod;
    import org.springframework.http.HttpRequest;
    import org.springframework.util.StringUtils;import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;/*** @Description jwt过滤器* @Date 2024/6/10 9:46* @Author liukang**/
    @WebFilter(urlPatterns = "/*") // 过滤所有路径
    public class JwtFilter implements Filter {@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {// 得到两个对象HttpServletRequest request =  (HttpServletRequest) servletRequest;HttpServletResponse response =  (HttpServletResponse) servletResponse;//直接放行if(HttpMethod.OPTIONS.toString().equals(request.getMethod())){filterChain.doFilter(request,response);return;}String requestURI = request.getRequestURI(); // 不含主机和端口号if(requestURI.contains("/login")){filterChain.doFilter(request,response);return;}// 得到请求头的信息(accessToken)String token = request.getHeader("accessToken");if(!StringUtils.hasText(token)){//响应前端错误的消息提示ResponseModel responseModel = new ResponseModel(500,"failure","令牌缺失!");ResponseUtil.write(responseModel,response);return;}// 解析Token信息try {JwtUtil.parseToken(token);}catch (Exception e){//响应前端错误的消息提示ResponseModel responseModel = new ResponseModel(401,"failure","令牌过期!");ResponseUtil.write(responseModel,response);return;}filterChain.doFilter(request,response);}
    }

    1.5 controller

    登录Controller

    package com.etime.controller;import com.etime.entity.User;
    import com.etime.util.JwtUtil;
    import com.etime.vo.ResponseModel;
    import org.springframework.web.bind.annotation.*;import java.util.HashMap;
    import java.util.Map;/*** @Date 2024/6/10 10:38* @Author liukang**/
    @RestController
    @CrossOrigin
    public class LoginController {@PostMapping("/login")public ResponseModel login(@RequestBody User user){Integer code = 200;String msg = "success";String accessToken = null;String refreshToken = null;Map tokenMap = new HashMap();if(user.getUsername().equals("admin")&&user.getPassword().equals("123")){// 生成jwtaccessToken = JwtUtil.generateToken(1000*10);// 设置有效期为10srefreshToken = JwtUtil.generateToken(1000*30);// 设置有效期为30stokenMap.put("accessToken",accessToken);tokenMap.put("refreshToken",refreshToken);}else {code = 500;msg = "failure";}return new ResponseModel(code,msg,tokenMap);}}

    测试请求Controller

    package com.etime.controller;import com.etime.vo.ResponseModel;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RestController;/*** @Date 2024/6/10 12:51* @Author liukang**/
    @CrossOrigin
    @RestController
    public class TestController {@PostMapping("/test")public ResponseModel test() {return new ResponseModel(200,"success","测试请求接口成功!");}}

    刷新Token的Controller

    package com.etime.controller;import com.etime.util.JwtUtil;
    import com.etime.vo.ResponseModel;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
    import java.util.Map;/*** @Date 2024/6/10 15:48* @Author liukang**/
    @CrossOrigin
    @RestController
    public class NewTokenController {@GetMapping("/newToken")public ResponseModel newToken(){String accessToken = JwtUtil.generateToken(1000*10);String refreshToken = JwtUtil.generateToken(1000*30);Map tokenMap = new HashMap();tokenMap.put("accessToken",accessToken);tokenMap.put("refreshToken",refreshToken);return new ResponseModel(200,"success",tokenMap);}
    }

    1.6 启动类

    package com.etime;import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.web.servlet.ServletComponentScan;/*** @Author liukang* @Date 2022/7/4 11:32*/
    @SpringBootApplication
    @ServletComponentScan(basePackages = "com.etime.filter")// 这个包下激活WebFilter这个注解
    public class Application {public static void main(String[] args) {SpringApplication.run(Application.class);}
    }

    2、前端实现

    2.1 登录页面

    <template><div class="hello"><form>用户名:<input v-model="username"/><br>密码<input v-model="password" /><br><button @click="login">登录</button></form></div></template><script>export default {data () {return {username:'',password:'',}},methods:{login(){this.axios.post('http://localhost:8088/login',{username:this.username,password:this.password,}).then(response => {console.log(response.data);if(response.data.code==200){sessionStorage.setItem("accessToken",response.data.token.accessToken)sessionStorage.setItem("refreshToken",response.data.token.refreshToken)this.$router.push({ path: 'index'});}}).catch(error => {console.error(error);});}},}</script><style scoped></style>

    2.2 index页面

    <template><div><button @click="test">请求受保护的接口</button></div></template><script>
    import intercepterConfig from './js/config'export default {data () {return {}},methods:{test(){const accessToken = sessionStorage.getItem('accessToken')let token = nullif(accessToken){token = accessToken}// console.log(token)this.axios.post('http://localhost:8088/test',{},/*{headers:{accessToken:'token'}}*/).then(response => {// if(response.data.code==200){console.log(response.data);// }}).catch(error => {console.error(error);});},},}</script><style scoped></style>

    2.3 请求拦截器和响应拦截器

    import axios from "axios";
    //axios请求拦截器
    axios.interceptors.request.use(config=>{// 正确的请求拦截器let token = null;let url = config.url// url.indexOf('/newToken')==-1  如果是刷新Token的请求 不用在拦截器里面加accessToken 这个请求已经在请求头中设置accessToken,加了会覆盖if(sessionStorage.getItem('accessToken')!=null && url.indexOf('/newToken')==-1){token = sessionStorage.getItem('accessToken')config.headers['accessToken'] = token}// 加入头信息的配置return config // 这句没写请求会发不出去},error=>{ // 出现异常的请求拦截器return Promise.reject(error)})
    // axios响应拦截器
    axios.interceptors.response.use(async res => {// 判断 401状态码 自动续期if (res.data.code == 401 &&!res.config.isRefresh) {//!res.config.isRefresh  不是刷新Token的请求才拦截 是则不拦截// 1.自动续期const res2 = await getNewToken()if(res2.data.code == 200){console.log('自动续期成功'+new Date().toLocaleString())// 2.更新sessionStorage里面的Token   没有这一步会死循环sessionStorage.setItem('accessToken',res2.data.token.accessToken)sessionStorage.setItem('refreshToken',res2.data.token.refreshToken)//3.重新发送请求res = await axios.request(res.config)// res.config 代表请求的所有参数(这里是上一次请求的所有参数),包括url和携带的所有数据}}return res     // 将重新请求的响应作为响应返回},error=>{return Promise.reject(error)})function getNewToken(){let url = "http://localhost:8088/newToken"let token = nullif(sessionStorage.getItem('refreshToken')!=null){token = sessionStorage.getItem('refreshToken')}return  axios.get(url,{headers:{accessToken:token},isRefresh:true})// 注意这里参数是accessToken:token  因为后端过滤器里面获取的是accessToken,所以要写这个,不然过滤器通不过过滤器
    }

    效果展示

    1.登录页面
    在这里插入图片描述
    2.输入用户名和密码点击【登录】
    在这里插入图片描述
    3.点击【请求受保护的资源】按钮
    在这里插入图片描述
    3.等待10秒,accessToken过期,但refreshToken未过期时,点击【请求受保护的资源】按钮
    在这里插入图片描述
    4.等待30秒后,refreshToken和accessToken都过期,再次点击【请求受保护的资源】按钮

    在这里插入图片描述


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

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

相关文章

Elasticsearch 第一期:基础的基础概念

前言 Elasticsearch&#xff08;弹性搜索&#xff09; &#xff0c;简称为ES&#xff0c; 它是一个开源的高扩展的分布式全文检索引擎&#xff0c;它提供的功能主要分为&#xff1a;实时存储&#xff0c;实时分析搜索&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服…

Java并发编程:利用CompletableFuture优化异步任务

在现代Java应用开发中&#xff0c;能够有效地处理异步任务是提升性能和用户体验的关键。Java 8引入的CompletableFuture提供了强大的工具&#xff0c;使得管理复杂的异步逻辑变得更简单。本文将探讨CompletableFuture的功能、用法及其在实际项目中的应用。 ### CompletableFut…

LeetCode 1731, 151, 148

目录 1731. 每位经理的下属员工数量题目链接表要求知识点思路代码 151. 反转字符串中的单词题目链接标签思路代码 148. 排序链表题目链接标签Collections.sort()思路代码 归并排序思路代码 1731. 每位经理的下属员工数量 题目链接 1731. 每位经理的下属员工数量 表 表Emplo…

【星座运势】本周财运分析,巨蟹座财富潜力大开!

大家好&#xff01;今天我们来谈谈巨蟹座本周的财富运势。经过调查和数据分析&#xff0c;我发现巨蟹座这周的财运潜力很大&#xff01;接下来&#xff0c;我将用通俗易懂的语言&#xff0c;通过代码说明&#xff0c;向大家展示巨蟹座的财富运势。 首先&#xff0c;我们需要通…

Java面试题:Redis哨兵模式

哨兵集群(sentinel) 实现主从集群的自动故障恢复 主从节点之间实现数据同步 哨兵的作用 监控 哨兵会不断检查主节点和从节点是否按照预期工作 自动故障恢复 如果主节点故障,哨兵会将从节点提升为主节点 当故障实例回复后以新的主节点为主 通知 哨兵充当Redis客户端的…

人工智能对零售业的影响

机器人、人工智能相关领域 news/events &#xff08;专栏目录&#xff09; 本文目录 一、人工智能如何改变零售格局二、利用人工智能实现购物体验自动化三、利用人工智能改善库存管理四、通过人工智能解决方案增强客户服务五、利用人工智能分析消费者行为六、利用 AI 打造个性化…

【javaEE-有关CPU进程和线程实现的并发编程及二者的区别】

&#x1f525;&#x1f525;&#x1f525;有关进程并发编程开发的成本问题 这次之前其实我们所有的写的程序都是使用单核心来运行的&#xff0c;但是一般我们的计算机都有很多核心&#xff0c;如果我们编程的时候&#xff0c;只使用一个核心的话&#xff0c;其实这是一个非常大…

【Java】Java 使用 Graphics2D 在图片上添加文字,并解决图片变红问题

文章目录 【Java】Java 使用 Graphics2D 在图片上添加文字&#xff0c;并解决图片变红问题完整案例 【Java】Java 使用 Graphics2D 在图片上添加文字&#xff0c;并解决图片变红问题 完整案例 public static void main(String[] args) {try {String filePath "D:\\Works…

使用源代码编译方式升级内核【笔记】

为什么要升级内核 升级内核有多个重要的原因,主要包括以下几点: 安全性:随着技术的发展,旧版本的内核可能会存在安全漏洞。黑客或恶意用户可能会利用这些漏洞进行攻击。升级内核可以修复这些已知的安全漏洞,从而提高系统的安全性。性能优化:新版本的内核通常会包含对性能…

打造成功的人力RPO项目:赢得市场赚取利润

人力资源外包(RPO)项目是当今企业在招聘和人才管理方面越来越倾向的选择。想要通过人力RPO项目赚钱&#xff0c;以下是一些关键的策略和步骤&#xff0c;帮助您进入这个市场并取得成功。 1. 建立专业的人力RPO服务 首先&#xff0c;要想在人力RPO项目中赚钱&#xff0c;必须建立…

9. 文本三剑客之awk

文章目录 9.1 什么是awk9.2 awk命令格式9.3 awk执行流程9.4 行与列9.4.1 取行9.4.2 取列 9.1 什么是awk 虽然sed编辑器是非常方便自动修改文本文件的工具&#xff0c;但其也有自身的限制。通常你需要一个用来处理文件中的数据的更高级工具&#xff0c;它能提供一个类编程环境来…

【CT】LeetCode手撕—20. 有效的括号

题目 原题连接&#xff1a;20. 有效的括号 1- 思路 模式识别 模式1&#xff1a;括号左右匹配 ——> 借助栈来实现 ——> Deque<Character> deque new LinkedList<>()模式2&#xff1a;顺序匹配 ——> 用 if 判断 具体思路 1.遇到左括号 直接入栈相应…

把本机的bash构建到docker镜像里面

最近突发奇想&#xff0c;想把本机的bash放到docker镜像里面&#xff0c;接下来看操作。 获取bash以及依赖 [rootbogon ~]# cat get_lib_info.sh #!/bin/bash# 函数&#xff1a;显示帮助信息 show_help() {echo "Usage: $(basename "$0") -h -f <file>…

FPGA IO_BANK、IO_STANDARD

描述 Xilinx 7系列FPGA和UltraScale体系结构提供了高性能&#xff08;HP&#xff09;和 高范围&#xff08;HR&#xff09;I/O组。I/O库是I/O块&#xff08;IOB&#xff09;的集合&#xff0c;具有可配置的 SelectIO驱动程序和接收器&#xff0c;支持多种标准接口 单端和差分。…

C# OpenCvSharp 代数运算-add、scaleAdd、addWeighted、subtract、absdiff、multiply、divide

在C#中使用OpenCvSharp进行图像处理时,理解和合理使用各种图像操作函数可以帮助我们实现许多实际应用中的需求。下面,我将详细介绍每个函数的使用,并给出与实际应用项目相关的示例,包括运算过程和运算结果。 1. add 函数 作用 将两幅图像进行相加,可以达到图像融合的目的…

JS中的延时操作setTimeout()和setInterval()

JS中&#xff0c;给我们提供两种延时操作的内置方法setTimeout()和setInterval()。setTimeout和setInterval方法都是挂载在javascript的window对象下&#xff0c;通过两个参数控制&#xff0c;第一个参数控制运行的表达式或方法&#xff0c;第二个参数表示延时的时间&#xff0…

【电路笔记】-共基极放大器

共基极放大器 文章目录 共基极放大器1、概述2、等效电路3、电流增益4、输入阻抗5、输出阻抗6、电压增益7、示例:电压、电流和功率增益8、总结1、概述 在本文中,我们将介绍双极晶体管放大器的最后一种拓扑,称为共基极放大器 (CBA)。 下面的图 1 显示了 CBA 的电气图,此处没…

vite-plugin-pwa 离线安装Vite应用

渐进式Web应用&#xff08;PWA&#xff09;通过结合 Web 和移动应用的特点&#xff0c;为用户带来更加流畅和快速的体验。且PWA支持离线访问能力&#xff08;访问静态资源本地缓存&#xff09;&#xff0c;极大提高了用户交互的流畅性&#xff0c;降低非必要的网络依赖。尤其适…

java中Array(数组)、List(列表)、Set(集合)、Map(映射)、Queue(队列)详解

1. 数组&#xff08;Array&#xff09; 概念 数组是存储固定大小相同类型元素的集合。数组在Java中是静态的&#xff0c;长度一旦确定就不能改变。 特点 固定大小&#xff1a;数组长度固定&#xff0c;不能动态改变。索引访问&#xff1a;通过索引&#xff08;从0开始&…

卡尔曼滤波源码注释和调用示例

卡尔曼滤波源码注释和调用示例 flyfish Python版本代码地址 C版代码地址 主要用于分析代码&#xff0c;增加了中文注释 import numpy as np import scipy.linalg""" 0.95分位数的卡方分布表&#xff0c;N自由度&#xff08;包含N1到9的值&#xff09;。 取自…