Routing ist eines der zentralen Elemente einer modernen React-Anwendung. Mit React Router 7 haben wir ein leistungsstarkes Werkzeug, um dynamische Anwendungen zu bauen, in denen verschiedene Seiten und Inhalte je nach Benutzer und Kontext angezeigt werden. Doch während das Routing selbst relativ einfach ist, wird es erst spannend, wenn du bestimmte Seiten absichern möchtest. In diesem Artikel lernst du, wie du geschützte Routen (Protected Routes) erstellst, Benutzerzugriffe regelst und deine Anwendung sicher machst.
Wenn du mehr über den Schutz deiner ReactJS Anwendung lernen möchtest, dann schau dir auch unseren Blogartikel dazu an.
Warum müssen Routen geschützt werden?
Nicht jede Seite einer App sollte für jeden zugänglich sein. Stell dir vor, du hast eine Anwendung mit einem Admin-Bereich, Nutzerprofilen oder bezahlten Premium-Inhalten. Ohne eine Schutzvorrichtung könnte jeder, der die URL kennt, auf diese Seiten zugreifen – und das ist ein riesiges Sicherheitsrisiko!
Es gibt mehrere Szenarien, in denen geschützte Routen essenziell sind:
Authentifizierte Bereiche: Nur angemeldete Benutzer dürfen auf bestimmte Seiten zugreifen.
Rollenbasierte Zugriffssteuerung: Nur Admins dürfen das Backend sehen.
Bezahlmodelle: Nur zahlende Kunden können Premium-Inhalte sehen.
Datenschutz: Vertrauliche Informationen sollen nur für autorisierte Nutzer zugänglich sein.
In diesem Artikel erkläre ich dir Schritt für Schritt, wie du geschützte Routen in React Router 7 implementierst, um deine Anwendung sicher und professionell zu gestalten.
Was ist neu in React Router 7?
Bevor wir uns den geschützten Routen widmen, werfen wir einen kurzen Blick darauf, was sich in React Router 7 geändert hat. Die wichtigste Verbesserung ist die Optimierung der Performance und der API-Designs:
Bessere TypeScript-Unterstützung: Weniger Fehler und mehr Typsicherheit.
Neues Datenmanagement: Lade Daten effizienter und strukturiere deine API-Calls.
Verbesserte
<Route>-Handhabung: Dynamisches Routing wurde optimiert.Bessere Synchronisation mit React 19: Mehr Zukunftssicherheit für moderne Apps.
Diese Verbesserungen machen es einfacher, sichere und flexible Routen für deine Anwendung zu definieren.
Installation und Grundkonfiguration
Falls du noch kein React Router in deinem Projekt hast, installiere es mit:
npm install react-router-domDann kannst du die Grundstruktur mit dem neuen Router definieren:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';
import Login from './Login';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;Soweit nichts Neues – aber jetzt kommen wir zum Schutz der Routen!
React Router 7 Routen schützen: Die Basics
1. Authentifizierung vs. Autorisierung
Es gibt zwei Konzepte, die du verstehen solltest, bevor du mit geschützten Routen arbeitest:
Authentifizierung (Authentication): Wer bist du? Ein Nutzer loggt sich ein und erhält eine Identität.
Autorisierung (Authorization): Was darfst du tun? Ein Nutzer erhält bestimmte Rechte basierend auf seiner Rolle.
In den meisten Anwendungen wird ein Nutzer nach der Anmeldung ein Token erhalten, das ihm den Zugang zu bestimmten Routen erlaubt. Dieses Token kann dann geprüft werden, bevor eine Route geladen wird.
2. Der einfachste Weg: Redirect bei fehlender Anmeldung
Ein grundlegender Schutzmechanismus ist eine ProtectedRoute-Komponente, die überprüft, ob der Nutzer eingeloggt ist. Falls nicht, wird er automatisch zur Login-Seite weitergeleitet.
Hier ist eine Beispielimplementierung für eine geschützte Route:
import { Navigate } from "react-router-dom";
const ProtectedRoute = ({ children }) => {
const isAuthenticated = !!localStorage.getItem("token");
return isAuthenticated ? children : <Navigate to="/login" replace />;
};Und so verwendest du diese Komponente:
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />Sobald ein nicht-authentifizierter Nutzer versucht, die /dashboard-Seite zu besuchen, wird er automatisch zum Login weitergeleitet.
Fortgeschrittene Routen-Sicherheit
3. Rollenbasierte Zugriffssteuerung
Nicht jeder Nutzer ist gleich! Stell dir eine App vor, in der es normale Nutzer, Moderatoren und Admins gibt. Während normale Nutzer nur auf ihr Profil zugreifen dürfen, sollen Moderatoren Inhalte verwalten und Admins das gesamte Backend sehen können.
Hier ein Beispiel für eine rollenbasierte Zugriffskontrolle:
const RoleBasedRoute = ({ children, allowedRoles }) => {
const user = JSON.parse(localStorage.getItem("user"));
return user && allowedRoles.includes(user.role) ? children : <Navigate to="/unauthorized" replace />;
};Nutzung dieser Komponente:
<Route path="/admin" element={<RoleBasedRoute allowedRoles={["admin"]}><AdminPanel /></RoleBasedRoute>} />4. Zugriff mit Tokens validieren
In vielen modernen Apps werden JSON Web Tokens (JWT) verwendet, um Nutzer zu authentifizieren. Diese Tokens können im LocalStorage oder in Cookies gespeichert werden. Beim Laden einer Route wird das Token überprüft, und nur wenn es gültig ist, darf der Nutzer die Seite sehen.
5. Schutz von API-Routen
Nicht nur UI-Routen müssen geschützt werden – auch API-Endpunkte sollten nur autorisierten Nutzern zur Verfügung stehen. In Kombination mit geschützten Routen in React solltest du auch dein Backend absichern.
fetch("/api/data", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`
}
});Damit erhält nur ein authentifizierter Nutzer Zugriff auf die Daten.
6. Authentifizierung mit Context API
Ein globaler Auth-Context kann helfen, den Authentifizierungsstatus zentral zu verwalten:
import { createContext, useContext, useState } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const login = () => setIsAuthenticated(true);
const logout = () => setIsAuthenticated(false);
return (
<AuthContext.Provider value={{ isAuthenticated, login, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);Dann passen wir unsere ProtectedRoute-Komponente an:
import { useAuth } from './AuthContext';
const ProtectedRoute = ({ children }) => {
const { isAuthenticated } = useAuth();
return isAuthenticated ? children : <Navigate to="/login" />;
};Jetzt können wir den Auth-Provider in unserer App nutzen:
<AuthProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
</Routes>
</BrowserRouter>
</AuthProvider>7. Login- und Logout-Handling
Hier eine einfache Login-Komponente, die den Auth-Context nutzt:
import { useAuth } from './AuthContext';
import { useNavigate } from 'react-router-dom';
const Login = () => {
const { login } = useAuth();
const navigate = useNavigate();
const handleLogin = () => {
login();
navigate('/dashboard');
};
return (
<div>
<h2>Login</h2>
<button onClick={handleLogin}>Einloggen</button>
</div>
);
};
export default Login;Ein Logout-Button kann so aussehen:
import { useAuth } from './AuthContext';
const LogoutButton = () => {
const { logout } = useAuth();
return <button onClick={logout}>Logout</button>;
};
export default LogoutButton;Fazit: Sichere React-Routen leicht gemacht!
Mit React Router 7 ist das Schützen von Routen einfacher als je zuvor. Durch eine Kombination aus Protected Routes, rollenbasiertem Routing und Token-Validierung kannst du sicherstellen, dass nur autorisierte Nutzer die richtigen Inhalte sehen.
Die wichtigsten Takeaways:
✅ ProtectedRoute-Komponente nutzen, um nicht-angemeldete Nutzer umzuleiten.
✅ Rollenbasierte Authentifizierung einführen, um unterschiedliche Nutzergruppen zu verwalten.
✅ Tokens sicher speichern und API-Calls optimieren.
✅ Keine sensiblen Fehlermeldungen ausgeben, um Angreifern keine Hinweise zu geben.
✅ Fallback-Mechanismen implementieren, um Endlosschleifen zu vermeiden.
✅ Mit einem zentralen Auth-Context bleibt dein Code übersichtlich und wartbar
Mit diesen Techniken bist du bestens gewappnet, um eine sichere und robuste React-Anwendung mit geschützten Routen zu bauen. Viel Erfolg bei der Umsetzung! 🚀
Wenn du deine ReactJS Anwendung von einem ethical Hacker auf Schwachstellen untersuchen lassen möchtest, findest du passende auf unserem Marktplatz für Cybersicherheit.
