Uwierzytelnianie służy jako bariera ochronna dla aplikacji, weryfikując tożsamość użytkowników i udzielając dostępu do chronionych zasobów. Jednak wymaganie od użytkowników wielokrotnego uwierzytelniania, zwłaszcza w ramach jednej sesji, może prowadzić do frustracji, utrudniać produktywność i zrujnować ich ogólne wrażenia.

Aby sprostać temu wyzwaniu, możesz wykorzystać pliki cookie i pamięć sesji do przechowywania danych uwierzytelniających użytkownika i innych spersonalizowanych informacje — pozwalając użytkownikom pozostać uwierzytelnionymi przez całą sesję bez konieczności ciągłego ponownego uwierzytelniania, a co za tym idzie, poprawy ich doświadczenie.

Zarządzanie danymi sesji użytkownika za pomocą plików cookie i przechowywania sesji

Zarządzanie sesją użytkownika jest kluczowym aspektem budowania solidnych i bezpiecznych aplikacji React. Właściwe zarządzanie danymi sesji za pomocą plików cookie i przechowywania sesji zapewnia płynną i spersonalizowaną obsługę użytkownika przy zachowaniu niezbędnych środków bezpieczeństwa.

Dane sesji użytkownika zazwyczaj zawierają informacje specyficzne dla bieżącej sesji użytkownika lub interakcji z aplikacją. Te dane mogą się różnić w zależności od wymagań i funkcjonalności aplikacji, ale zwykle obejmują:

• Informacje związane z uwierzytelnianiem.
• Preferencje i ustawienia użytkownika.
• Aktywność i historia użytkownika.

Pliki cookie to pliki tekstowe zawierające małe fragmenty danych przechowywane przez przeglądarki internetowe na urządzeniu użytkownika. Są powszechnie używane do przechowywania danych uwierzytelniających i wszelkich innych spersonalizowanych informacji o użytkowniku, umożliwiając aplikacjom internetowym utrzymywanie sesji użytkownika w wielu sesjach przeglądarki.

Z drugiej strony, przechowywanie sesji — podobnie jak przechowywanie lokalne—to mechanizm przechowywania danych po stronie klienta zapewniany przez nowoczesne przeglądarki. W przeciwieństwie do plików cookie jest ograniczony do określonej sesji przeglądania i dostępny tylko w ramach tej samej karty lub okna. Przechowywanie sesji oferuje prosty i bezpośredni sposób przechowywania danych specyficznych dla sesji dla aplikacji internetowych.

Zarówno pliki cookie, jak i przechowywanie sesji odgrywają kluczową rolę w zarządzaniu danymi sesji użytkownika. Pliki cookie świetnie sprawdzają się w sytuacjach, w których wymagana jest trwałość danych w wielu sesjach. Natomiast przechowywanie sesji jest korzystne, gdy chcesz wyizolować dane w ramach jednej sesji przeglądania, zapewniając lekką i specyficzną opcję przechowywania.

Teraz zbadajmy, jak obsługiwać dane sesji użytkownika, w szczególności skupiając się na przechowywaniu informacji uwierzytelniających przy użyciu plików cookie i przechowywania sesji.

Skonfiguruj projekt React

Rozpocząć, skonfiguruj projekt React za pomocą Vite. Następnie zainstaluj te pakiety w swoim projekcie.

npm zainstaluj js-cookie reagowanie na router-dom

W idealnej sytuacji po zalogowaniu się użytkownika i pomyślnym uwierzytelnieniu jego danych uwierzytelniających przez interfejs API uwierzytelniania zaplecza, pliki cookie i przechowywanie sesji przechowują tokeny uwierzytelniające, identyfikatory sesji lub wszelkie inne istotne dane podczas użytkownika sesja.

Te tokeny lub identyfikatory wraz z dodatkowymi danymi zapisywane są w przeglądarce użytkownika automatycznie zawarte w kolejnych żądaniach kierowanych do serwera w celu weryfikacji, zanim użytkownik będzie mógł uzyskać dostęp do chronionych zasoby.

W ten sposób sesja użytkownika utrzymuje się przy wielu żądaniach, zapewniając bezproblemową interakcję z aplikacją bez konieczności ponownego uwierzytelniania przy każdym żądaniu.

Możesz znaleźć kod tego projektu w this Repozytorium GitHub.

Zarządzanie danymi sesji uwierzytelniania użytkownika za pomocą plików cookie

Aby zademonstrować, jak używać plików cookie do przechowywania informacji uwierzytelniających użytkowników, utwórz nowy plik składniki/Logowanie.jsx plik w źródło informator. Wewnątrz tego pliku dodaj następujący kod.

1. Wykonaj następujące importy.

   import { stan użycia } z'reagować';
   import { useNavigate } z„React-router-dom”;
   import Ciasteczka z„js-ciasteczko”;

2. Utwórz komponent funkcjonalny i dodaj elementy JSX do formularza logowania.

   konst zaloguj się = () => {
   konst [nazwa użytkownika, setUsername] = useState('');
   konst [hasło, ustawHasło] = useState('');
   powrót (
   
   
   
    typ="tekst"
    symbol zastępczy="Nazwa użytkownika"
    wartość={nazwa użytkownika}
    onChange={(e) => setUsername (e.target.value)}
    />
    typ="hasło"
    symbol zastępczy="Hasło"
    wartość={hasło}
    onChange={(e) => setPassword (e.target.value)}
    />
   "składać">Zaloguj się</button>
    </form>
    );
   };
   eksportdomyślny Zaloguj sie;

Ponieważ nie mamy interfejsu API zaplecza do uwierzytelniania poświadczeń użytkownika, utworzymy funkcję, która weryfikuje dane wprowadzone przez użytkownika w formularzu logowania przy użyciu poświadczeń użytkownika testowego. Wewnątrz komponentu funkcjonalnego dodaj następujący kod.

konst testAuthData = {
 nazwa użytkownika: 'test',
 hasło: 'test',
 }; 
konst uwierzytelnić użytkownika = (Nazwa użytkownika Hasło) => {
Jeśli (nazwa użytkownika testAuthData. nazwa użytkownika && hasło testAuthData.hasło) { 
konst dane użytkownika = {
 nazwa użytkownika,
 hasło,
 };
konst czas wygaśnięcia = nowyData(nowyData().getTime() + 60000);
 zestaw plików cookie („uwierzytelnij”, JSON.stringify (dane użytkownika), { wygasa: Data ważności });
powrótPRAWDA;
 }
powrótFAŁSZ;
 };
konst uchwytLogowanie = (mi) => {
 e.preventDefault();
konst isAuthenticated = AuthenticateUser (nazwa użytkownika, hasło);
Jeśli (jest uwierzytelniony) {
 nawigować('/chroniony');
 } w przeciwnym razie {
// Pokaż komunikat o błędzie lub wykonaj inne czynności w przypadku nieudanego uwierzytelnienia
 }
 };

W środku uwierzytelnić użytkownika sprawdza, czy podana nazwa użytkownika i hasło są zgodne z testowymi danymi uwierzytelniającymi. Jeśli poświadczenia są zgodne, tworzy plik dane użytkownika obiekt z nazwą użytkownika i hasłem. Następnie ustawia czas wygaśnięcia pliku cookie i zapisuje go dane użytkownika w pliku cookie o nazwie autoryzacja używając Zestaw plików cookie metoda.

Po pomyślnym uwierzytelnieniu użytkownik zostaje przekierowany na chronioną stronę, ponieważ ma uprawnienia dostępu do chronionych zasobów. Przechowując informacje uwierzytelniające w pliku cookie, ustanawiasz aktywną sesję użytkownika, umożliwiając automatyczne uwzględnianie danych uwierzytelniających w kolejnych żądaniach.

Te dane sesji użytkownika umożliwiają kodowi serwera weryfikację tożsamości użytkownika i autoryzację dostępu do uprawnień bez konieczności ponownego uwierzytelniania użytkownika przy każdym żądaniu.

Zaktualizuj plik App.jsx

Wprowadź zmiany w Aplikacja.jsx plik do obsługi routingu użytkowników po pomyślnym uwierzytelnieniu

import { BrowserRouter, Route, Routes, useNavigate } z„React-router-dom”;
import Ciasteczka z„js-ciasteczko”;
import Zaloguj sie z„./komponenty/Logowanie”;
konst Strona chroniona = ({ ...odpoczynek }) => {
konst isAuthenticated = !!Cookies.get(„uwierzytelnij”);
konst nawiguj = użyjNawiguj();
konst uchwytWyloguj = () => { 
 cookies.remove(„uwierzytelnij”);
 nawigować('/Zaloguj sie'); 
 };
Jeśli (!jest uwierzytelniony) {
 nawigować('/Zaloguj sie'); 
powrótzero; // Zwróć null, aby zapobiec renderowaniu czegokolwiek innego
 }
powrót (



rozmiar czcionki: „24px”, kolor: 'niebieski' }}>Witaj, świecie!</h1>
marginesGórny: „10 pikseli” }} onClick={uchwyt wylogowania}>
 Wyloguj
 </button>
 </div>
 );
};


konst Aplikacja = () => {
powrót (


"/chroniony/*" element={} />
"/Zaloguj sie" element={} />
 </Routes>
 </BrowserRouter>
 );
};
eksportdomyślny Aplikacja;

Powyższy kod konfiguruje niezbędne komponenty i logikę routingu. Zawiera przycisk wylogowania, który po naciśnięciu usuwa uwierzytelniający plik cookie i przekierowuje użytkownika na stronę logowania.

Dodatkowo weryfikuje obecność uwierzytelniającego pliku cookie i przekierowuje użytkowników na stronę logowania w przypadku jego braku. Jeśli jednak plik cookie jest obecny, plik Strona chroniona komponent renderuje stronę dostępną wyłącznie dla uwierzytelnionych użytkowników.

Na koniec uruchom poniższe polecenie, aby uruchomić serwer programistyczny w celu przetestowania aplikacji.

npm uruchom dev

W przeglądarce przejdź do http://127.0.0.1:5173/logini wprowadź poświadczenia uwierzytelniania testowego. Po pomyślnym zalogowaniu generowany jest nowy plik cookie zawierający dane sesji, w tym informacje o testowym uwierzytelnianiu.

Gdy plik cookie wygaśnie lub klikniesz przycisk wylogowania, plik cookie zostanie usunięty. Ta czynność skutecznie kończy aktywną sesję użytkownika i powoduje wylogowanie.

Przechowywanie danych uwierzytelniających użytkownika przy użyciu pamięci sesji

Zarówno przechowywanie sesji, jak i pliki cookie działają podobnie. Aby przechowywać niezbędne informacje w pamięci sesji przeglądarki, możesz skorzystać z sessionStorage.setItem metoda.

 sessionStorage.setItem(„uwierzytelnij”, JSON.stringify (dane użytkownika));

Dodając powyższą instrukcję do pliku uwierzytelnić użytkownika funkcja w Zaloguj sie komponent, możesz przechowywać dane uwierzytelniające użytkownika w pamięci sesji przeglądarki.

Badanie dodatkowych przypadków użycia plików cookie i przechowywania sesji

W tym przewodniku wyjaśniono, jak używać plików cookie i magazynu sesji do przechowywania poświadczeń uwierzytelniających użytkowników. Niemniej jednak pliki cookie i przechowywanie sesji oferują szerszy zakres możliwości poza przechowywaniem informacji uwierzytelniających.

Wykorzystując te funkcje, możesz zarządzać dodatkowymi danymi sesji, co prowadzi do bezpieczniejszego i bardziej spersonalizowanego doświadczenia użytkownika.