Spring Boot + Vue中的Token续签机制

在这个示例中，我们将使用Spring Boot作为后端框架，Vue作为前端框架，演示如何在全栈应用中实现长短Token的续签。

1. Spring Boot后端

1.1 长Token的生成

在Spring Boot中，我们首先创建一个服务来生成JWT Token。使用jjwt库，确保在pom.xml文件中添加以下依赖：


    io.jsonwebtoken
    jjwt
    0.9.1

然后，创建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 u服务器托管网sername) {
    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);
    }
);

2.2 处理Token过期

在Vue应用中，可以使用路由守卫来检查Token是否过期，如果过期则触发续签流程：

import router from '@/router';
import axios from 'axios';

router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('token');
    
    if (!token) {
        // 用户未登录，跳转到登录页
        next('/login');
    } else {
        // 检查Token是否过期
        axios.post('/api/checkToken', { token })
            .then(response => {
                // Token有效，正常跳转
                next();
            })
            .catch(error => {
                // Token过期，进行续签
                axios.post('/api/renewToken', { oldToken: token })
                    .then(response => {
                        // 续签成功，更新本地Token
                        localStorage.setItem('token', response.data.newToken);
                        next();
                    })
                    .catch(renewError => {
                        // 续签失败，跳转到登录页
                        localStorage.removeItem('token');
                        next('/login');
                    });
            });
    }
});

通过这个路由守卫，我们在每次路由跳转前检查Token是否过期，如果过期则触发续签流程。这样就实现了在Vue前端应用中的Token续签机制。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 刷题学习记录

[MRCTF2020]PYWebsite1 进入环境，页面就提示要购买flag，不要想着购买，因为扫码后提示的是一个文本 “拜托！你不会真的想PYflag吧，这样可是违规的！再好好分析一下界面代码吧” 查看网页源码，发现flag文件访问后得到该页面，查看源码…

你真的了解token续期嘛？