Erfahren Sie, wie Sie Benutzerauthentifizierungsdaten und andere personalisierte Informationen mithilfe von Cookies und Sitzungsspeicher in React speichern.
Die Authentifizierung dient als Schutzbarriere für Softwareanwendungen, indem sie die Identität von Benutzern überprüft und Zugriff auf geschützte Ressourcen gewährt. Allerdings kann die Anforderung, dass Benutzer sich wiederholt authentifizieren müssen, insbesondere innerhalb einer einzelnen Sitzung, zu Frustration führen, die Produktivität beeinträchtigen und ihr Gesamterlebnis beeinträchtigen.
Um diese Herausforderung zu meistern, können Sie Cookies und Sitzungsspeicher nutzen, um Benutzerauthentifizierungsdaten und andere personalisierte Daten beizubehalten Informationen – sodass Benutzer während einer Sitzung authentifiziert bleiben können, ohne dass eine ständige Neuauthentifizierung erforderlich ist, was zu einer Verbesserung führt ihre Erfahrung.
Verwalten von Benutzersitzungsdaten mithilfe von Cookies und Sitzungsspeicher
Die Verwaltung von Benutzersitzungen ist ein entscheidender Aspekt beim Aufbau robuster und sicherer React-Anwendungen. Durch die ordnungsgemäße Verwaltung der Sitzungsdaten mithilfe von Cookies und Sitzungsspeicherung wird ein reibungsloses und personalisiertes Benutzererlebnis gewährleistet und gleichzeitig die erforderlichen Sicherheitsmaßnahmen aufrechterhalten.
Benutzersitzungsdaten umfassen normalerweise Informationen, die sich speziell auf die aktuelle Sitzung oder Interaktion eines Benutzers mit einer Anwendung beziehen. Diese Daten können je nach Anforderungen und Funktionalität der Anwendung variieren, umfassen jedoch üblicherweise Folgendes:
- Authentifizierungsbezogene Informationen.
- Benutzerpräferenzen und -einstellungen.
- Benutzeraktivität und -verlauf.
Cookies sind Textdateien, die kleine Datenmengen enthalten von Webbrowsern auf dem Gerät des Benutzers gespeichert. Sie werden häufig zum Speichern von Authentifizierungsdaten und anderen personalisierten Benutzerinformationen verwendet, sodass Webanwendungen Benutzersitzungen über mehrere Browsersitzungen hinweg aufrechterhalten können.
Andererseits, Sitzungsspeicher – ähnlich dem lokalen Speicher– ist ein clientseitiger Speichermechanismus, der von modernen Browsern bereitgestellt wird. Im Gegensatz zu Cookies sind sie auf eine bestimmte Browsersitzung beschränkt und nur innerhalb derselben Registerkarte oder desselben Fensters zugänglich. Sitzungsspeicher bietet eine einfache und unkomplizierte Möglichkeit, sitzungsspezifische Daten für Webanwendungen zu speichern.
Sowohl Cookies als auch Sitzungsspeicher spielen eine entscheidende Rolle bei der Verwaltung von Benutzersitzungsdaten. Cookies eignen sich hervorragend in Situationen, in denen die Datenpersistenz über mehrere Sitzungen hinweg erforderlich ist. Im Gegensatz dazu ist die Sitzungsspeicherung von Vorteil, wenn Sie Daten innerhalb einer einzelnen Browsersitzung isolieren möchten, und bietet so eine leichte und spezifische Speicheroption.
Lassen Sie uns nun untersuchen, wie mit Benutzersitzungsdaten umgegangen wird, wobei wir uns insbesondere auf die Speicherung von Authentifizierungsinformationen mithilfe von Cookies und Sitzungsspeicherung konzentrieren.
Richten Sie ein Reaktionsprojekt ein
Um zu beginnen, Richten Sie ein React-Projekt mit Vite ein. Als nächstes installieren Sie diese Pakete in Ihrem Projekt.
npm installiere js-cookie reagieren-router-domIm Idealfall, nachdem sich ein Benutzer angemeldet hat und seine Anmeldeinformationen erfolgreich durch eine Backend-Authentifizierungs-API authentifiziert wurden, Cookies und Sitzungsspeicher speichern Authentifizierungstoken, Sitzungskennungen oder andere relevante Daten während des Benutzers Sitzung.
Diese Token oder Identifikatoren werden zusammen mit den zusätzlichen Daten automatisch im Browser des Benutzers gespeichert in nachfolgenden Anfragen an den Server zur Überprüfung enthalten, bevor ein Benutzer auf den geschützten Zugriff zugreifen kann Ressourcen.
Auf diese Weise bleibt die Sitzung eines Benutzers über mehrere Anfragen hinweg bestehen und stellt sicher, dass er nahtlos mit der Anwendung interagiert, ohne sich bei jeder Anfrage erneut authentifizieren zu müssen.
Den Code dieses Projekts finden Sie hier GitHub-Repository.
Verwalten von Benutzerauthentifizierungssitzungsdaten mithilfe von Cookies
Um zu demonstrieren, wie Cookies zum Speichern der Authentifizierungsinformationen von Benutzern verwendet werden, erstellen Sie ein neues Komponenten/Login.jsx Datei in der src Verzeichnis. Fügen Sie in dieser Datei den folgenden Code hinzu.
- Führen Sie die folgenden Importe durch.
importieren { useState } aus'reagieren';
importieren { useNavigate } aus'react-router-dom';
importieren Kekse aus'js-cookie'; - Erstellen Sie eine Funktionskomponente und fügen Sie JSX-Elemente für ein Anmeldeformular hinzu.
const Anmelden = () => {
const [Benutzername, setUsername] = useState('');
const [Passwort, setPassword] = useState('');zurückkehren (
ExportStandard Anmeldung;
Da wir über keine Backend-API zur Authentifizierung der Benutzeranmeldeinformationen verfügen, erstellen wir eine Funktion, die die vom Benutzer im Anmeldeformular eingegebenen Daten anhand der Anmeldeinformationen des Testbenutzers überprüft. Fügen Sie innerhalb der Funktionskomponente den folgenden Code hinzu.
const testAuthData = {
Nutzername: 'prüfen',
Passwort: 'prüfen',
};
const AuthenticateUser = (Benutzername Passwort) => {
Wenn (Benutzername testAuthData.username && Passwort testAuthData.password) {
const userData = {
Nutzername,
Passwort,
};
const expirationTime = neuDatum(neuDatum().getTime() + 60000);
Cookies.set('auth.', JSON.stringify (userData), { läuft ab: expirationTime });
zurückkehrenWAHR;
}
zurückkehrenFALSCH;
};
const handleLogin = (e) => {
e.preventDefault();
const isAuthenticated = AuthenticateUser (Benutzername, Passwort);
Wenn (isAuthenticated) {
navigieren('/geschützt');
} anders {
// Fehlermeldung anzeigen oder andere Aktionen bei fehlgeschlagener Authentifizierung durchführen
}
};Im Inneren AuthenticateUser Mit dieser Funktion wird überprüft, ob der angegebene Benutzername und das Kennwort mit den Testauthentifizierungsdaten übereinstimmen. Wenn die Anmeldeinformationen übereinstimmen, wird eine erstellt Benutzerdaten Objekt mit dem Benutzernamen und dem Passwort. Anschließend wird eine Ablaufzeit für das Cookie festgelegt und gespeichert Benutzerdaten in einem Cookie namens Autor Verwendung der Cookies.set Methode.
Nach erfolgreicher Authentifizierung wird ein Benutzer auf eine geschützte Seite weitergeleitet, da er berechtigt ist, auf geschützte Ressourcen zuzugreifen. Indem Sie die Authentifizierungsinformationen in einem Cookie speichern, richten Sie eine aktive Benutzersitzung ein, sodass nachfolgende Anfragen die Authentifizierungsdetails automatisch enthalten können.
Mithilfe dieser Benutzersitzungsdaten kann der Servercode die Identität des Benutzers überprüfen und den Zugriff auf Berechtigungen autorisieren, ohne dass sich der Benutzer bei jeder Anfrage erneut authentifizieren muss.
Aktualisieren Sie die App.jsx-Datei
Nehmen Sie Änderungen an der vor App.jsx Datei zur Handhabung der Benutzerweiterleitung nach erfolgreicher Authentifizierung
importieren { BrowserRouter, Route, Routen, useNavigate } aus'react-router-dom';
importieren Kekse aus'js-cookie';
importieren Anmeldung aus'./components/Login';const ProtectedPage = ({ ...ausruhen }) => {
const isAuthenticated = !!Cookies.get('auth.');
const navigieren = useNavigate();
const handleLogout = () => {
Cookies.remove('auth.');
navigieren('/Anmeldung');
};Wenn (!isAuthenticated) {
navigieren('/Anmeldung');
zurückkehrenNull; // Null zurückgeben, um zu verhindern, dass etwas anderes gerendert wird
}zurückkehren (
Schriftgröße: '24px', Farbe: 'Blau' }}>Hallo Welt!</h1>
const App = () => {
zurückkehren (
"/geschützt/*" element={} /> "/Anmeldung" element={} />
</Routes>
</BrowserRouter>
);
};
ExportStandard App;
Der obige Code richtet die erforderlichen Komponenten und die Routing-Logik ein. Es enthält eine Abmeldeschaltfläche, die beim Drücken das Authentifizierungs-Cookie löscht und den Benutzer zur Anmeldeseite weiterleitet.
Darüber hinaus überprüft es das Vorhandensein des Authentifizierungscookies und leitet Benutzer zur Anmeldeseite weiter, wenn dieses nicht vorhanden ist. Wenn das Cookie jedoch vorhanden ist, wird das Geschützte Seite Die Komponente rendert eine Seite, die ausschließlich authentifizierten Benutzern zugänglich ist.
Führen Sie abschließend den folgenden Befehl aus, um den Entwicklungsserver zum Testen der Anwendung hochzufahren.
npm run devNavigieren Sie in Ihrem Browser zu http://127.0.0.1:5173/login, und geben Sie die Anmeldeinformationen für die Testauthentifizierung ein. Nach erfolgreicher Anmeldung wird ein neues Cookie mit den Sitzungsdaten generiert, zu denen auch die Testauthentifizierungsinformationen gehören.
Sobald das Cookie abläuft oder wenn Sie auf die Schaltfläche „Abmelden“ klicken, wird das Cookie gelöscht. Diese Aktion beendet effektiv die aktive Benutzersitzung und meldet Sie ab.
Speichern von Benutzerauthentifizierungsdaten mithilfe der Sitzungsspeicherung
Sowohl Sitzungsspeicher als auch Cookies funktionieren ähnlich. Um die notwendigen Informationen im Sitzungsspeicher des Browsers zu speichern, können Sie die nutzen sessionStorage.setItem Methode.
sessionStorage.setItem('auth.', JSON.stringify (userData));Durch Hinzufügen der obigen Anweisung innerhalb der AuthenticateUser Funktion in der Anmeldung Mit der Komponente können Sie die Authentifizierungsdaten des Benutzers im Sitzungsspeicher des Browsers speichern.
Erkundung zusätzlicher Anwendungsfälle für Cookies und Sitzungsspeicherung
In diesem Leitfaden wurde erläutert, wie Cookies und Sitzungsspeicher zum Speichern der Authentifizierungsdaten der Benutzer verwendet werden. Dennoch bieten Cookies und Sitzungsspeicher ein breiteres Spektrum an Möglichkeiten, die über das Speichern von Authentifizierungsinformationen hinausgehen.
Durch die Nutzung dieser Funktionen können Sie zusätzliche Sitzungsdaten verwalten, was zu einem sichereren und personalisierteren Benutzererlebnis führt.
