你真的了解token续期嘛？

Spring Boot + Vue中的Token续签机制

在现代的全栈应用开发中，Spring Boot作为后端框架和Vue.js作为前端框架的组合非常流行。在这种架构中实现Token续签是保障应用安全的关键部分。本文旨在提供一个基于Spring Boot和Vue的长短Token续签示例。
1. Spring Boot后端

1.1 长Token的生成

在Spring Boot中，我们首先需要一个方法来生成JWT Token。这里我们使用jjwt库。
引入依赖

在pom.xml文件中加入以下依赖：

1. <dependency>
2.     <groupId>io.jsonwebtoken</groupId>
3.     <artifactId>jjwt</artifactId>
4.     <version>0.9.1</version>
5. </dependency>

复制代码

生成Token

创建一个服务JwtTokenService来生成和解析Token。

1. import io.jsonwebtoken.Jwts;
2. import io.jsonwebtoken.SignatureAlgorithm;
3. import java.util.Date;
5. @Service
6. public class JwtTokenService {
8.     private String secretKey = "your_secret_key";
10.     public String generateLongToken(String username) {
11.         long expiration = 7 * 24 * 60 * 60 * 1000; // 7 days
12.         return Jwts.builder()
13.                 .setSubject(username)
14.                 .setExpiration(new Date(System.currentTimeMillis() + expiration))
15.                 .signWith(SignatureAlgorithm.HS256, secretKey)
16.                 .compact();
17.     }
19.     // ... 其他方法 ...
20. }

复制代码

1.2 短Token的生成

短Token的生成方式类似，只是过期时间较短。

1. public String generateShortToken(String username) {
2.     long expiration = 15 * 60 * 1000; // 15 minutes
3.     return Jwts.builder()
4.             .setSubject(username)
5.             .setExpiration(new Date(System.currentTimeMillis() + expiration))
6.             .signWith(SignatureAlgorithm.HS256, secretKey)
7.             .compact();
8. }

复制代码

1.3 Token续签

当用户进行操作时，可以根据需要续签Token。

1. public String renewToken(String oldToken) {
2.     // 解析旧Token获取用户名
3.     String username = Jwts.parser()
4.             .setSigningKey(secretKey)
5.             .parseClaimsJws(oldToken)
6.             .getBody()
7.             .getSubject();
9.     // 生成新的短Token
10.     return generateShortToken(username);
11. }

复制代码

2. Vue前端

在Vue应用中，我们需要确保每次发送请求时附加Token，并在需要时更新Token。
2.1 设置Axios拦截器

在Vue项目中，我们使用Axios来发送HTTP请求。通过设置拦截器，我们可以在每个请求中自动添加Token。

1. import axios from 'axios';
3. axios.interceptors.request.use(
4.     config => {
5.         const token = localStorage.getItem('token');
6.         if (token) {
7.             config.headers.Authorization = `Bearer ${token}`;
8.         }
9.         return config;
10.     },
11.     error => {
12.         return Promise.reject(error);
13.     }
14. );

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！