Autentisering fungerar som en skyddande barriär för programvaruapplikationer, verifierar användarnas identitet och ger åtkomst till skyddade resurser. Men att kräva att användarna autentiseras upprepade gånger, särskilt under en enda session, kan leda till frustration, försämra produktiviteten och förstöra deras totala upplevelse.

För att övervinna denna utmaning kan du använda cookies och sessionslagring för att bevara användarautentiseringsdata och andra personliga information – vilket gör det möjligt för användare att förbli autentiserade under en session utan att behöva ständig omautentisering, och följaktligen förbättra deras erfarenhet.

Hantera användarsessionsdata med hjälp av cookies och sessionslagring

Användarsessionshantering är en avgörande aspekt av att bygga robusta och säkra React-applikationer. Korrekt hantering av sessionsdata med hjälp av cookies och sessionslagring säkerställer en smidig och personlig användarupplevelse samtidigt som de nödvändiga säkerhetsåtgärderna bibehålls.

Användarsessionsdata inkluderar vanligtvis information som är specifik för en användares aktuella session eller interaktion med en applikation. Dessa data kan variera beroende på applikationens krav och funktionalitet men inkluderar vanligtvis följande:

• Autentiseringsrelaterad information.
• Användarinställningar och inställningar.
• Användaraktivitet och historik.

Cookies är textfiler som innehåller små databitar lagras av webbläsare på användarens enhet. De används vanligtvis för att lagra autentiseringsdata och all annan personlig användarinformation, vilket gör att webbapplikationer kan upprätthålla användarsessioner över flera webbläsarsessioner.

Å andra sidan, sessionslagring – liknande lokal lagring-är en lagringsmekanism på klientsidan som tillhandahålls av moderna webbläsare. Till skillnad från cookies är den begränsad till en specifik surfsession och endast tillgänglig inom samma flik eller fönster. Sessionslagring erbjuder ett enkelt och okomplicerat sätt att lagra sessionsspecifik data för webbapplikationer.

Både cookies och sessionslagring spelar avgörande roller för att hantera användarsessionsdata. Cookies är bra i situationer där databeständighet över flera sessioner krävs. Däremot är sessionslagring fördelaktigt när du vill isolera data inom en enda surfsession, vilket ger ett lättviktigt och specifikt lagringsalternativ.

Låt oss nu utforska hur man hanterar användarsessionsdata, speciellt med fokus på att lagra autentiseringsinformation med hjälp av cookies och sessionslagring.

Skapa ett React-projekt

För att starta, skapa ett React-projekt med Vite. Installera sedan dessa paket i ditt projekt.

npm installera js-cookie react-router-dom

Helst, efter att en användare har loggat in och deras autentiseringsuppgifter har autentiserats av ett backend-autentiserings-API, cookies och sessionslagring lagrar autentiseringstokens, sessionsidentifierare eller annan relevant data under användarens session.

Dessa tokens eller identifierare tillsammans med ytterligare data som lagras i användarens webbläsare sker automatiskt ingår i efterföljande förfrågningar som görs till servern för verifiering innan en användare kan komma åt skyddad Resurser.

På så sätt fortsätter en användares session över flera förfrågningar – vilket säkerställer att de sömlöst interagerar med applikationen utan att behöva autentisera på nytt för varje begäran.

Du kan hitta detta projekts kod i denna GitHub-förråd.

Hantera användarautentiseringssessionsdata med hjälp av cookies

För att visa hur man använder cookies för att lagra användarnas autentiseringsinformation, fortsätt och skapa en ny komponenter/Login.jsx fil i src katalog. Lägg till följande kod i den här filen.

1. Gör följande importer.

   importera { useState } från'reagera';
   importera { useNavigate } från"reagera-router-dom";
   importera Småkakor från'js-cookie';

2. Skapa en funktionell komponent och lägg till JSX-element för ett inloggningsformulär.

   konst Logga in = () => {
   konst [användarnamn, setUsername] = useState('');
   konst [lösenord, setPassword] = useState('');
   lämna tillbaka (
   
   
   
    typ="text"
    platshållare="Användarnamn"
    värde={användarnamn}
    onChange={(e) => setUsername (e.target.value)}
    />
    typ="Lösenord"
    platshållare="Lösenord"
    värde={lösenord}
    onChange={(e) => setPassword (e.target.value)}
    />
   "Skicka in">Logga in</button>
    </form>
    );
   };
   exporterastandard Logga in;

Eftersom vi inte har ett backend-API för att autentisera användaruppgifter, skapar vi en funktion som verifierar data som användaren har angett i inloggningsformuläret med hjälp av testanvändaruppgifter. Inuti den funktionella komponenten, lägg till följande kod.

konst testAuthData = {
 Användarnamn: 'testa',
 Lösenord: 'testa',
 }; 
konst authenticateUser = (användarnamn Lösenord) => {
om (användarnamn testAuthData.username && lösenord testAuthData.password) { 
konst userData = {
 Användarnamn,
 Lösenord,
 };
konst utgångstid = nyDatum(nyDatum().getTime() + 60000);
 Cookies.set('auth', JSON.stringify (userData), { löper ut: utgångstid });
lämna tillbakaSann;
 }
lämna tillbakafalsk;
 };
konst handleLogin = (e) => {
 e.preventDefault();
konst isAuthenticated = authenticateUser (användarnamn, lösenord);
om (är autentiserad) {
 navigera('/skyddad');
 } annan {
// Visa felmeddelande eller utför andra åtgärder för misslyckad autentisering
 }
 };

Inuti authenticateUser funktionen kontrollerar den om det angivna användarnamnet och lösenordet matchar testautentiseringsdata. Om referenserna stämmer överens skapar det en användardata objekt med användarnamn och lösenord. Den ställer sedan in en utgångstid för kakan och lagrar användardata i en kaka som heter auth använda Cookies.set metod.

Efter framgångsrik autentisering omdirigerar en användare till en skyddad sida eftersom de har behörighet att komma åt skyddade resurser. Genom att lagra autentiseringsinformationen i en cookie upprättar du en aktiv användarsession, vilket gör att efterföljande förfrågningar kan inkludera autentiseringsdetaljerna automatiskt.

Denna användarsessionsdata tillåter serverkoden att verifiera användarens identitet och auktorisera åtkomst till privilegier utan att användaren behöver autentisera på nytt för varje begäran.

Uppdatera filen App.jsx

Gör ändringar i App.jsx fil för att hantera användardirigering efter framgångsrik autentisering

importera { BrowserRouter, Route, Routes, useNavigate } från"reagera-router-dom";
importera Småkakor från'js-cookie';
importera Logga in från'./components/Login';
konst ProtectedPage = ({ ...resten }) => {
konst isAuthenticated = !!Cookies.get('auth');
konst navigera = useNavigate();
konst handleLogout = () => { 
 Cookies.remove('auth');
 navigera('/logga in'); 
 };
om (!isAuthenticated) {
 navigera('/logga in'); 
lämna tillbakanull; // Returnera null för att förhindra att något annat återges
 }
lämna tillbaka (



textstorlek: '24px', Färg: 'blå' }}>Hej världen!</h1>
marginalTopp: '10px' }} onClick={handleLogout}>
 Logga ut
 </button>
 </div>
 );
};


konst App = () => {
lämna tillbaka (


"/skyddad/*" element={} />
"/logga in" element={} />
 </Routes>
 </BrowserRouter>
 );
};
exporterastandard App;

Koden ovan ställer in de nödvändiga komponenterna och routinglogiken. Den innehåller en utloggningsknapp som, när den trycks ned, tar bort autentiseringskakan och omdirigerar användaren till inloggningssidan.

Dessutom verifierar den närvaron av autentiseringscookien och omdirigerar användare till inloggningssidan om den saknas. Men om kakan är närvarande, ProtectedPage komponent renderar en sida som är exklusivt tillgänglig för autentiserade användare.

Slutligen, kör kommandot nedan för att snurra upp utvecklingsservern för att testa applikationen.

npm kör dev

Navigera till i din webbläsare http://127.0.0.1:5173/login,och ange testautentiseringsuppgifterna. Efter framgångsrik inloggning genereras en ny cookie som innehåller sessionsdata, som inkluderar testautentiseringsinformationen.

När cookien förfaller eller när du klickar på utloggningsknappen raderas kakan. Denna åtgärd avslutar effektivt den aktiva användarsessionen och loggar ut dig.

Lagra användarautentiseringsdata med sessionslagring

Både sessionslagring och cookies fungerar på liknande sätt. För att lagra nödvändig information i webbläsarens sessionslagring kan du använda sessionStorage.setItem metod.

 sessionStorage.setItem('auth', JSON.stringify (userData));

Genom att lägga till uttalandet ovan inuti authenticateUser funktion i Logga in komponent, kan du lagra autentiseringsdata för användaren i webbläsarens sessionslagring.

Utforska ytterligare användningsfall för cookies och sessionslagring

Den här guiden belyste hur man använder cookies och sessionslagring för att lagra användarnas autentiseringsuppgifter. Icke desto mindre erbjuder cookies och sessionslagring ett bredare utbud av möjligheter utöver att lagra autentiseringsinformation.

Genom att utnyttja dessa funktioner kan du hantera ytterligare sessionsdata, vilket leder till en säkrare och personligare användarupplevelse.