Wie werden Anfragen während der Axios-Token-Aktualisierung in die Warteschlange gestellt? ⇐ JavaScript

[Anonymous]

Sie können dieses Problem lösen, indem Sie ein Flag zum Verfolgen des Aktualisierungsstatus und ein Array zum Speichern ausstehender Anforderungen verwenden. Die manuelle Verwaltung der Warteschlange kann jedoch recht komplex werden.
Vollständige Offenlegung: Ich bin der Autor der unten genannten Bibliothek.
Ich habe ein kleines Dienstprogramm namens axios-auth-refresh-queue erstellt, um dies zu automatisieren. Es fängt 401-Fehler ab, löst Ihre Aktualisierungslogik aus und stellt alle nachfolgenden Anfragen in die Warteschlange, bis das neue Token bereit ist.
Die meisten Lösungen verarbeiten Anfragen nur innerhalb einer einzigen Registerkarte. Wenn ein Benutzer jedoch mehrere Tabs geöffnet hat, kann es zu „Race Conditions“ kommen, bei denen mehrere Tabs gleichzeitig versuchen, das Token zu aktualisieren.
Meine Bibliothek, axios-auth-refresh-queue, enthält eine Funktion zur Tab-übergreifenden Synchronisierung. Es verwendet LocalStorage oder BroadcastChannel, um sicherzustellen, dass nur ein Tab die Aktualisierung durchführt, während andere Tabs warten und dann automatisch das neue Token empfangen.
Beispielverwendung:

Code: Select all

import axios from "axios";
import { applyAuthTokenInterceptor } from "axios-auth-refresh-queue";

// 1. Create your axios instance
const apiClient = axios.create({
baseURL: "https://api.your-backend.com", // 👈 REPLACE THIS with your actual API URL
});

// 2. Setup the interceptor
applyAuthTokenInterceptor(apiClient, {
headerTokenHandler: (request) => {
const token = localStorage.getItem("accessToken");
if (token) {
request.headers.Authorization = `Bearer ${token}`;
}
},
// Method to get the refresh token from your storage
// (You can use localStorage, sessionStorage, or cookies here)
getRefreshToken: () => localStorage.getItem("refresh_token"),

// Method to call your backend to refresh the token
requestRefresh: async (refreshToken) => {
// ⚠️ IMPORTANT: Implement your own refresh token API logic here
const response = await axios.post(
"https://api.your-backend.com/auth/refresh",
{
token: refreshToken,
}
);

// Function must return this specific object structure
return {
accessToken: response.data.accessToken,
refreshToken: response.data.refreshToken,
};
},

// Callback when refresh succeeds
onSuccess: (newTokens) => {
// Logic to save new tokens to storage
localStorage.setItem("access_token", newTokens.accessToken);
if (newTokens.refreshToken) {
localStorage.setItem("refresh_token", newTokens.refreshToken);
}

// Optional: Set default header for future requests
apiClient.defaults.headers.common[
"Authorization"
] = `Bearer ${newTokens.accessToken}`;
},

// Callback when refresh fails (e.g., Refresh token also expired)
onFailure: (error) => {
console.error("Session expired, logging out...");
localStorage.clear();
window.location.href = "/login"; // Redirect to login page
},
});

export default apiClient;

Den vollständigen Quellcode und die Dokumentation finden Sie hier: https://github.com/Eden1711/axios-auth-refresh#readme