Wie kann die Routenschutzlogik für mehrere Komponenten wiederverwendet werden? [Duplikat] ⇐ JavaScript

[Guest]

Ich erstelle eine React-App und muss Komponenten abhängig davon rendern, ob der Benutzer authentifiziert ist. Es gibt zwar bereits Lösungen, die ProtectedRoute-Komponenten verwenden, diese lösen jedoch nicht mein spezifisches Problem.
In meinem Fall möchte ich:

• Schützen Sie mehrere Routen, ohne die Logik über Komponenten hinweg zu wiederholen.
• Verwenden Sie einen globalen Status (wie React Context oder Redux), um
  Authentifizierung zu handhaben, also brauche ich das nicht um die isAuthenticated-Requisite zu übergeben
  überall.
• Bieten Sie eine bessere Fehlerbehandlung bei unbefugtem Zugriff,
  z. B. die Anzeige benutzerdefinierter Fehlermeldungen für bestimmte Routen.

Hier ist mein aktuelles Setup:

Code: Select all

import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard';

const App = () => {
const isAuthenticated = false;

return (




isAuthenticated ?  : 
}
/>


);
};

export default App;

Dies funktioniert für grundlegende Anwendungsfälle, wird jedoch schwieriger zu verwalten, wenn ich mehr geschützte Routen hinzufüge. Ich habe mir ähnliche Fragen zu ProtectedRoute-Komponenten angesehen, aber sie erklären nicht, wie man einen globalen Status integriert und das Verhalten bei nicht autorisiertem Zugriff anpasst.
Ich habe versucht, eine ProtectedRoute-Komponente zu erstellen. aber ich musste isAuthenticated immer noch manuell für jede Route übergeben. Ich habe auch versucht, die App mit einem Context.Provider zu umschließen, aber es fällt mir schwer herauszufinden, wie ich die Logik sauber verwalten kann.