快捷導(dǎo)航

SpringBoot+Vue中的Token續(xù)簽機制

更新時間：2024年06月20日 11:22:10 作者：caicai687800

本文主要介紹了SpringBoot+Vue中的Token續(xù)簽機制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. Spring Boot后端

1.1 長Token的生成

在Spring Boot中，我們首先創(chuàng)建一個服務(wù)來生成JWT Token。使用jjwt庫，確保在pom.xml文件中添加以下依賴：

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

然后，創(chuàng)建JwtTokenService服務(wù)：

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續(xù)簽

創(chuàng)建一個方法用于續(xù)簽Token：

public String renewToken(String oldToken) {
    // 解析舊Token獲取用戶名
    String username = Jwts.parser()
            .setSigningKey(secretKey)
            .parseClaimsJws(oldToken)
            .getBody()
            .getSubject();

    // 生成新的短Token
    return generateShortToken(username);
}

2. Vue前端

在Vue應(yīng)用中，確保每次請求時都附加Token，并在需要時更新Token。

2.1 處理Token過期

在Vue應(yīng)用中，可以使用攔截器來檢查Token是否過期，如果過期則觸發(fā)續(xù)簽流程：

// main.js 或者其他入口文件
import Vue from 'vue';
import axios from 'axios';

// 設(shè)置axios攔截器
axios.interceptors.request.use(
  config => {
    // 在發(fā)送請求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      // 如果存在令牌，將其添加到請求頭
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    // 對響應(yīng)數(shù)據(jù)做些什么
    return response;
  },
  error => {
    // 對響應(yīng)錯誤做些什么
    const originalRequest = error.config;
    
    if (error.response.status === 401 && !originalRequest._retry) {
      // 如果響應(yīng)狀態(tài)為401（未授權(quán)）并且尚未重試過
      originalRequest._retry = true;
      
      // 發(fā)送續(xù)期請求
      return axios.post('/api/renew-token')
        .then(response => {
          // 更新本地存儲的令牌
          updateLocalStorageToken(response.data.token);
          
          // 重新發(fā)送原始請求
          return axios(originalRequest);
        });
    }
    
    return Promise.reject(error);
  }
);

// 將axios添加到Vue的原型中，使其在組件中可以直接使用
Vue.prototype.$http = axios;

通過這個攔截器，我們在每次請求時就可以檢查Token是否過期，如果過期則觸發(fā)續(xù)簽流程。這樣就實現(xiàn)了在Vue前端應(yīng)用中的Token續(xù)簽機制。

到此這篇關(guān)于SpringBoot+Vue中的Token續(xù)簽機制的文章就介紹到這了,更多相關(guān)SpringBoot Vue Token續(xù)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: