Wie gehe ich mit TanStack Router + TanStack Query richtig mit geschützten Routen um, ohne dass der Bildschirm auf 403 le ⇐ JavaScript

[Anonymous]

Ich verwende TanStack Router und TanStack Query in einer React-App, um die Authentifizierung zu implementieren. Ich rufe den aktuellen Benutzer mithilfe einer Abfrage innerhalb eines AuthProvider ab und möchte bestimmte Routen basierend darauf schützen, ob der Benutzer authentifiziert ist.
Wenn die /auth/profile-Anfrage 403 (nicht authentifizierter Benutzer) zurückgibt, zeigt die App einen leeren Bildschirm an, anstatt die Startseite darzustellen. Ich möchte, dass die Home-Route normal geladen wird, auch wenn der Benutzer nicht angemeldet ist, und nur beim Zugriff auf geschützte Seiten zu /login umleitet.
Hier ist meine aktuelle AuthProvider-Implementierung:

Code: Select all

const AuthContext = createContext(null);

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const userQuery = useSuspenseQuery(fetchUserInfoOptions);

if (userQuery.isLoading) {
return Context Loading...;
}

if (userQuery.isError) {
console.log("Context Error:", userQuery.error.message);
}

const isAuthenticated =
userQuery.data.data && !userQuery.isError ? true : false;
const user = userQuery.data ? userQuery.data.data : null;

return (

{children}

);
};

Da ich useSuspenseQuery verwende, scheinen Fehler den isError-Status zu umgehen – der Anbieter protokolliert den Fehler nie und die Benutzeroberfläche wird angehalten, was zu einem leeren Bildschirm führt.
Was ich will:
Bei Autorisierung → geschützte Seiten laden lassen

Bei 403 → Als Gast behandeln → Öffentlich zulassen Seiten werden normal gerendert

Nur umleiten, wenn auf geschützte Routen zugegriffen wird

Keine leeren Bildschirme aufgrund von Suspense-Fehlern
Meine Frage:
Wie kann man geschützte Routen mit TanStack Router + TanStack Query richtig einrichten, damit:

• Eine fehlgeschlagene Authentifizierungsabfrage (403) unterbricht nicht die gesamte App
• Nur geschützte Routen führen Umleitungen durch
• Öffentliche Routen werden weiterhin für nicht authentifizierte Benutzer geladen

Sollte ich useSuspenseQuery entfernen, stattdessen Routenlader für Authentifizierungsprüfungen verwenden oder verarbeiten 403 anders in der Abruffunktion?
Empfohlene Beispiele oder Muster wären großartig!