SpringBoot+Vue中的Token续签机制
在这个示例中,我们将使用Spring Boot作为后端框架,Vue作为前端框架,演示如何在全栈应用中实现长短Token的续签。
1. Spring Boot后端
1.1 长Token的生成
在Spring Boot中,我们首先创建一个服务来生成JWT Token。使用jjwt库,确保在pom.xml文件中添加以下依赖:
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
然后,创建JwtTokenService服务:
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.stereotype.Service;
import java.util.Date;
@Service
public class JwtTokenService {
private String secretKey = "your_secret_key";
public String generateLongToken(String username) {
long expiration = 7 * 24 * 60 * 60 * 1000; // 7 days
return Jwts.builder()
.setSubject(username)
.setExpiration(new Date(System.currentTimeMillis() + expiration))
.signWith(SignatureAlgorithm.HS256, secretKey)
.compact();
}
// ... 其他方法 ...
}
1.2 短Token的生成
添加生成短Token的方法:
public String generateShortToken(String username) {
long expiration = 15 * 60 * 1000; // 15 minutes
return Jwts.builder()
.setSubject(username)
.setExpiration(new Date(System.currentTimeMillis() + expiration))
.signWith(SignatureAlgorithm.HS256, secretKey)
.compact();
}
1.3 Token续签
创建一个方法用于续签Token:
public String renewToken(String oldToken) {
// 解析旧Token获取用户名
String username = Jwts.parser()
.setSigningKey(secretKey)
.parseClaimsJws(oldToken)
.getBody()
.getSubject();
// 生成新的短Token
return generateShortToken(username);
}
2. Vue前端
在Vue应用中,确保每次请求时都附加Token,并在需要时更新Token。
2.1 处理Token过期
在Vue应用中,可以使用拦截器来检查Token是否过期,如果过期则触发续签流程:
// main.js 或者其他入口文件
import Vue from 'vue';
import axios from 'axios';
// 设置axios拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token');
if (token) {
// 如果存在令牌,将其添加到请求头
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
// 对响应数据做些什么
return response;
},
error => {
// 对响应错误做些什么
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
// 如果响应状态为401(未授权)并且尚未重试过
originalRequest._retry = true;
// 发送续期请求
return axios.post('/api/renew-token')
.then(response => {
// 更新本地存储的令牌
updateLocalStorageToken(response.data.token);
// 重新发送原始请求
return axios(originalRequest);
});
}
return Promise.reject(error);
}
);
// 将axios添加到Vue的原型中,使其在组件中可以直接使用
Vue.prototype.$http = axios;
通过这个拦截器,我们在每次请求时就可以检查Token是否过期,如果过期则触发续签流程。这样就实现了在Vue前端应用中的Token续签机制。
到此这篇关于SpringBoot+Vue中的Token续签机制的文章就介绍到这了,更多相关SpringBoot Vue Token续签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
SpringBoot常用注解@RestControllerAdvice详解
这篇文章主要介绍了SpringBoot常用注解@RestControllerAdvice详解,@RestControllerAdvice是一个组合注解,由@ControllerAdvice、@ResponseBody组成,而@ControllerAdvice继承了@Component,因此@RestControllerAdvice本质上是个Component,需要的朋友可以参考下2024-01-01
Java项目中Service 层不直接返回Result 对象的原因分析
在Service层直接返回Result对象会导致业务逻辑与表现逻辑耦合,降低代码清晰度和可维护性,正确的做法是让每一层专注于自己的职责,保持代码可复用性,这篇文章给大家介绍为什么Java里面,Service 层不直接返回Result对象,感兴趣的朋友跟随小编一起看看吧2026-02-02
Java版本兼容性之JDK 21的SDK在JDK 1.8的使用解读
文章介绍了Java的字节码版本机制以及如何处理UnsupportedClassVersionError错误,文章首先解释了JVM如何通过检查.class文件的字节码版本号来确定是否可以运行该文件,然后给出了三个解决方案:统一环境、交叉编译和多版本JAR2025-11-11


最新评论