如何實現無感刷新 Token

使用 JSON Web Token (JWT) 進行身份驗證是一種常見的做法。然而，JWT 通常有一個有效期，當用戶的令牌過期時，如果不進行處理，用戶將被迫重新登錄，這會影響用戶體驗。為了解決這個問題，可以實現無感刷新（silent refresh）機制，自動刷新令牌而不打擾用戶。

本文將介紹如何實現無感刷新 Token 的技術方案，包括以下步驟：

生成和使用訪問令牌和刷新令牌
自動刷新訪問令牌
處理令牌刷新失敗的情況

1. 生成和使用訪問令牌和刷新令牌

生成訪問令牌和刷新令牌

在用戶登錄時，服務器生成兩個令牌：訪問令牌（access token）和刷新令牌（refresh token）。訪問令牌用于驗證用戶身份，有較短的有效期；刷新令牌用于獲取新的訪問令牌，有較長的有效期。

import jwt
import datetime

def generate_tokens(user_id):
    access_token = jwt.encode({
        'user_id': user_id,
        'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=15)
    }, 'access_secret_key', algorithm='HS256')

    refresh_token = jwt.encode({
        'user_id': user_id,
        'exp': datetime.datetime.utcnow() + datetime.timedelta(days=7)
    }, 'refresh_secret_key', algorithm='HS256')

    return access_token, refresh_token

返回令牌給客戶端

在用戶登錄成功后，將訪問令牌和刷新令牌返回給客戶端，并將它們存儲在安全的位置。

// 示例：使用 axios 處理登錄請求并存儲令牌
axios.post('https://yourapi.com/login', {
  username: 'user',
  password: 'password'
}).then(response => {
  localStorage.setItem('access_token', response.data.access_token);
  localStorage.setItem('refresh_token', response.data.refresh_token);
});

2. 自動刷新訪問令牌

攔截請求并檢查令牌

在前端，使用 Axios 攔截器檢查每個請求的訪問令牌是否即將過期。如果即將過期，使用刷新令牌獲取新的訪問令牌。

import axios from 'axios';
import jwt_decode from 'jwt-decode';

// 創建 Axios 實例
const api = axios.create({
  baseURL: 'https://yourapi.com',
});

// 添加請求攔截器
api.interceptors.request.use(async (config) => {
  let accessToken = localStorage.getItem('access_token');
  const refreshToken = localStorage.getItem('refresh_token');

  if (accessToken) {
    const { exp } = jwt_decode(accessToken);
    const expirationTime = exp * 1000;
    const currentTime = Date.now();

    // 如果訪問令牌即將過期，刷新令牌
    if (expirationTime - currentTime < 5 * 60 * 1000) { // 5 分鐘
      try {
        const response = await axios.post('https://yourapi.com/refresh-token', { token: refreshToken });
        accessToken = response.data.access_token;
        localStorage.setItem('access_token', accessToken);
      } catch (error) {
        console.error('Unable to refresh token', error);
        // 刷新令牌失敗，處理失敗邏輯
      }
    }

    config.headers['Authorization'] = `Bearer ${accessToken}`;
  }

  return config;
}, error => {
  return Promise.reject(error);
});

服務器端刷新令牌

在服務器端，實現刷新令牌的邏輯，驗證刷新令牌并生成新的訪問令牌。

from flask import Flask, request, jsonify
import jwt
import datetime

app = Flask(__name__)

@app.route('/refresh-token', methods=['POST'])
def refresh_token():
    try:
        refresh_token = request.json.get('token')
        decoded_refresh_token = jwt.decode(refresh_token, 'refresh_secret_key', algorithms=['HS256'])
        user_id = decoded_refresh_token['user_id']

        new_access_token = jwt.encode({
            'user_id': user_id,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=15)
        }, 'access_secret_key', algorithm='HS256')

        return jsonify({'access_token': new_access_token})
    except jwt.ExpiredSignatureError:
        return jsonify({'error': 'Refresh token expired'}), 401
    except jwt.InvalidTokenError:
        return jsonify({'error': 'Invalid refresh token'}), 401

if __name__ == '__main__':
    app.run()

3. 處理令牌刷新失敗的情況

在實際應用中，可能會遇到刷新令牌失敗的情況，如刷新令牌已過期或無效。此時需要處理這些情況，通常是引導用戶重新登錄。

在前端處理刷新失敗

在前端攔截響應錯誤，當刷新令牌失敗時，清除存儲的令牌并重定向用戶到登錄頁面。

// 添加響應攔截器
api.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401 && error.config && !error.config.__isRetryRequest) {
    localStorage.removeItem('access_token');
    localStorage.removeItem('refresh_token');
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

總結

無感刷新（silent refresh）機制通過在后臺自動刷新訪問令牌，確保用戶在使用應用時不會因令牌過期而被迫重新登錄，從而提高用戶體驗。實現無感刷新需要前后端協同工作，前端負責檢測和刷新令牌，后端提供刷新令牌的接口。通過合理的設計和實現，可以有效地提高應用的安全性和用戶體驗。

posted @ 2024-07-30 19:00 最小生成樹閱讀(832) 評論(0) 收藏舉報

刷新頁面返回頂部

zx618