feat(frontend): Voelker-Views (Modul 3) + Refresh-Token-Race-Fix

/colonies: Liste; /colonies/new: Anlegeformular mit Bienenstand-/
Volkstyp-Auswahl; /colonies/[id]: Bearbeiten, Aktionen (Umsetzen,
Ableger bilden, Vereinigen, Aufloesen je als Dialog/Button) und
Historie-Anzeige. Aktionen deaktiviert, sobald das Volk nicht mehr
ACTIVE ist (Frontend-Pendant zum neuen Backend-Guard).

Beim Live-Testen im Browser gefunden und behoben:
- Echter Root-Cause fuer den fruehren Session-Abbruch nach Reload: der
  Refresh-Token ist einmalig/rotierend, und React StrictMode ruft den
  Session-Restore-Effect im Dev-Modus doppelt auf. Der vorherige
  AbortController-Fix verhinderte nur, dass der Client die verworfene
  Antwort nutzt - er verhinderte NICHT, dass die zweite Anfrage bereits
  serverseitig verarbeitet wurde, bevor abort() griff. Fix: echtes
  Request-Deduplizieren in refreshRequest() (gemeinsames In-Flight-
  Promise) statt Abbruchversuch - der Standardansatz fuer rotierende
  Refresh-Token.
- Historie-Text beim Vereinigen war fuer die aufnehmende Seite falsch
  ("Entstanden durch Vereinigung" impliziert Neuanlage) - jetzt
  "Anderes Volk eingegliedert".

Nav-Leiste und proxy.ts-Matcher um /colonies erweitert.

9 Vitest-Tests, Lint, Typecheck und Build gruen. Kompletter Flow
(Anlegen, Umsetzen, Ableger bilden, Vereinigen, Aufloesen, Historie)
live im Browser gegen den echten Server verifiziert, inkl. Rollen-
filterung in den Aktions-Dialogen.
This commit is contained in:
Nick Szaunig committed 2026-08-21 18:21:10 +02:00
1 parent a71b31df38
commit 6e328cdacb
14 files changed
+904 -18

No files matched your search

+18 -2
View File
@@ -17,11 +17,18 @@ export async function loginRequest(email: string, password: string): Promise<Acc
return response.json() as Promise<AccessTokenResponse>;
}
export async function refreshRequest(signal?: AbortSignal): Promise<AccessTokenResponse | null> {
// The refresh token is single-use and rotates on every call. If two callers
// (e.g. React StrictMode's dev double-invoke, or two components hitting a 401
// at once) both call refresh at the same time, the second one always fails
// because the first already rotated the cookie. Deduplicating into one
// shared in-flight request makes concurrent callers share the same result
// instead of racing each other.
let inFlightRefresh: Promise<AccessTokenResponse | null> | null = null;
async function performRefresh(): Promise<AccessTokenResponse | null> {
const response = await fetch(`${API_URL}/auth/refresh`, {
method: 'POST',
credentials: 'include',
signal,
});
if (!response.ok) {
return null;
@@ -29,6 +36,15 @@ export async function refreshRequest(signal?: AbortSignal): Promise<AccessTokenR
return response.json() as Promise<AccessTokenResponse>;
}
export function refreshRequest(): Promise<AccessTokenResponse | null> {
if (!inFlightRefresh) {
inFlightRefresh = performRefresh().finally(() => {
inFlightRefresh = null;
});
}
return inFlightRefresh;
}
export async function logoutRequest(): Promise<void> {
await fetch(`${API_URL}/auth/logout`, { method: 'POST', credentials: 'include' });
}
+2 -14
View File
@@ -34,28 +34,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const controller = new AbortController();
refreshRequest(controller.signal)
refreshRequest()
.then((result) => {
if (!result) {
return;
}
setUser(applyAccessToken(result.accessToken));
})
.catch((error: unknown) => {
if (error instanceof DOMException && error.name === "AbortError") {
return;
}
throw error;
})
.finally(() => {
if (!controller.signal.aborted) {
setIsLoading(false);
}
setIsLoading(false);
});
return () => {
controller.abort();
};
}, []);
const login = useCallback(async (email: string, password: string) => {