fix(frontend): seltener Relogin durch stillen Token-Refresh
Build and Push Multi-Platform Images / build-and-push (push) Successful in 17s
Build and Push Multi-Platform Images / build-and-push (push) Successful in 17s
Zwei Lücken behoben, die bei abgelaufenem Access-Token (v.a. nach inaktivem Tab, dessen Renew-Timer gedrosselt wurde) zu vollständigen Neuanmeldungen führten: - getAccessToken erneuert das Token jetzt proaktiv (signinSilent), wenn es abgelaufen ist, statt ein abgelaufenes Token zu senden. Profitiert auch den direkten fetch-Aufrufen (Bilder/PDFs). - Der 401-Interceptor versucht zuerst einen stillen Refresh und wiederholt die Anfrage einmal; erst wenn das scheitert (Refresh-Token ungültig), erfolgt der Login-Redirect. Gleichzeitige Refreshes werden dedupliziert (renewToken), um invalid_grant bei Refresh-Token-Rotation zu vermeiden. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,12 @@
|
|||||||
import axios from 'axios';
|
import axios, { type InternalAxiosRequestConfig } from 'axios';
|
||||||
import { getAccessToken } from '../auth/oidc';
|
import { getAccessToken, renewToken } from '../auth/oidc';
|
||||||
import { triggerLoginRedirect } from '../auth/sessionRedirect';
|
import { triggerLoginRedirect } from '../auth/sessionRedirect';
|
||||||
import { getEnv } from '../utils/env';
|
import { getEnv } from '../utils/env';
|
||||||
|
|
||||||
|
// Markiert eine bereits einmal wiederholte Anfrage, um Endlosschleifen zu
|
||||||
|
// vermeiden.
|
||||||
|
type RetryConfig = InternalAxiosRequestConfig & { _retried?: boolean };
|
||||||
|
|
||||||
const api = axios.create({
|
const api = axios.create({
|
||||||
baseURL: getEnv('VITE_API_URL') || '',
|
baseURL: getEnv('VITE_API_URL') || '',
|
||||||
timeout: 30000,
|
timeout: 30000,
|
||||||
@@ -19,7 +23,18 @@ api.interceptors.request.use(async (config) => {
|
|||||||
api.interceptors.response.use(
|
api.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => response,
|
||||||
async (error) => {
|
async (error) => {
|
||||||
if (error.response?.status === 401) {
|
const original = error.config as RetryConfig | undefined;
|
||||||
|
if (error.response?.status === 401 && original && !original._retried) {
|
||||||
|
original._retried = true;
|
||||||
|
// Erst still erneuern und die Anfrage einmal wiederholen, bevor wir den
|
||||||
|
// Nutzer zu einer kompletten Neuanmeldung zwingen.
|
||||||
|
const user = await renewToken();
|
||||||
|
if (user?.access_token) {
|
||||||
|
original.headers.Authorization = `Bearer ${user.access_token}`;
|
||||||
|
return api(original);
|
||||||
|
}
|
||||||
|
// Erneuerung fehlgeschlagen (Refresh-Token ungültig/abgelaufen) →
|
||||||
|
// echte Neuanmeldung nötig.
|
||||||
await triggerLoginRedirect();
|
await triggerLoginRedirect();
|
||||||
}
|
}
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
|
|||||||
@@ -34,9 +34,36 @@ export async function getUser(): Promise<User | null> {
|
|||||||
return userManager.getUser();
|
return userManager.getUser();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Laufender Silent-Renew-Vorgang – mehrere gleichzeitige Aufrufe teilen sich
|
||||||
|
// denselben Refresh (Dedup), damit nicht parallele signinSilent-Aufrufe mit
|
||||||
|
// einem rotierenden Refresh-Token kollidieren (invalid_grant).
|
||||||
|
let renewPromise: Promise<User | null> | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Erneuert das Token still über den Refresh-Token (signinSilent). Schlägt die
|
||||||
|
* Erneuerung fehl, wird null geliefert (statt zu werfen). Gleichzeitige Aufrufe
|
||||||
|
* werden dedupliziert.
|
||||||
|
*/
|
||||||
|
export function renewToken(): Promise<User | null> {
|
||||||
|
if (!renewPromise) {
|
||||||
|
renewPromise = userManager.signinSilent().catch((err: unknown) => {
|
||||||
|
console.error('OIDC: signinSilent fehlgeschlagen', err);
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
void renewPromise.finally(() => {
|
||||||
|
renewPromise = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return renewPromise;
|
||||||
|
}
|
||||||
|
|
||||||
export async function getAccessToken(): Promise<string | null> {
|
export async function getAccessToken(): Promise<string | null> {
|
||||||
const user = await getUser();
|
const user = await getUser();
|
||||||
return user?.access_token ?? null;
|
if (!user) return null; // nicht eingeloggt
|
||||||
|
if (!user.expired) return user.access_token ?? null;
|
||||||
|
// Token ist abgelaufen → vor dem Senden still erneuern.
|
||||||
|
const renewed = await renewToken();
|
||||||
|
return renewed?.access_token ?? null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export { userManager };
|
export { userManager };
|
||||||
|
|||||||
Reference in New Issue
Block a user