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
文件中加入以下依赖：

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>

生成Token

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

import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
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 设置Axios拦截器

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

import axios from '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);
    }
);