feat(frontend): Login + Benutzerverwaltung (Modul 1)
/login: Formular gegen AuthProvider (Access-Token im Memory, Refresh per httpOnly-Cookie), Fehlermeldung bei falschen Zugangsdaten. (app)/layout.tsx: geschuetztes Layout, leitet ohne Session zu /login um, Header mit Nutzer-E-Mail + Abmelden. settings/layout.tsx: zusaetzliches Admin-Gate fuer /settings/users. /settings/users: Liste, Anlegen-Dialog (shadcn/Base UI Dialog+Select), Deaktivieren - alles ueber TanStack Query gegen die Users-API. proxy.ts (Next 16 Nachfolger von middleware.ts): optimistische Cookie-Praesenz-Pruefung fuer /login und /settings/*, echte Autorisierung bleibt serverseitig (RolesGuard). Backend-Fixes waehrend Browser-Verifikation gefunden und behoben: - CORS fehlte komplett (app.enableCors, FRONTEND_ORIGIN) - jeder Cross-Origin-Request von :3000 nach :3001 wurde geblockt. - React-StrictMode-Doppel-Effect liess zwei parallele Refresh-Aufrufe laufen; da Refresh-Tokens rotierend/einmalig sind, gewann einer und der andere bekam 401 -> Nutzer flog nach jedem Reload aus der Session. Fix: AbortController im Session-Restore-Effect. - Manifest verwies auf nicht existente PNG-Icons (404); durch public/icon.svg ersetzt. 7 Vitest-Tests (Login-Formular, Users-Liste, JWT-Decode), Lint, Typecheck und Build gruen. Kompletter Flow (Login, Reload-Persistenz, Benutzer anlegen/deaktivieren, Abmelden, Redirect ohne Session) live im Browser gegen den echten Server verifiziert.
This commit is contained in:
1 parent
370102387f
commit
029484f9d5
23 files changed
+758
-10
No files matched your search
@@ -0,0 +1,53 @@
|
||||
import { getAccessToken, setAccessToken } from './token-store';
|
||||
import { refreshRequest } from './api';
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001/api/v1';
|
||||
|
||||
export class ApiError extends Error {
|
||||
status: number;
|
||||
|
||||
constructor(status: number, message: string) {
|
||||
super(message);
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
|
||||
async function rawFetch(path: string, init: RequestInit): Promise<Response> {
|
||||
const token = getAccessToken();
|
||||
return fetch(`${API_URL}${path}`, {
|
||||
...init,
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...init.headers,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function apiFetch<T>(path: string, init: RequestInit = {}): Promise<T> {
|
||||
let response = await rawFetch(path, init);
|
||||
|
||||
if (response.status === 401) {
|
||||
const refreshed = await refreshRequest();
|
||||
if (refreshed) {
|
||||
setAccessToken(refreshed.accessToken);
|
||||
response = await rawFetch(path, init);
|
||||
}
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const body: unknown = await response.json().catch(() => ({}));
|
||||
const message =
|
||||
typeof body === 'object' && body !== null && 'message' in body
|
||||
? String((body as { message: unknown }).message)
|
||||
: 'Request failed';
|
||||
throw new ApiError(response.status, message);
|
||||
}
|
||||
|
||||
if (response.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
|
||||
return response.json() as Promise<T>;
|
||||
}
|
||||
Reference in new issue
Block a user