Schlüsselpunkte

• Cookies und Sitzungen sind kritische Komponenten in der Webentwicklung und werden verwendet, um Benutzerdaten, Authentifizierung und Status zu verwalten. Cookies sind kleine Mengen an Datenbrocken, die von einem Webbrowser auf dem Ger?t eines Benutzers gespeichert sind, und die Sitzung bezieht sich auf die Zeit, in der ein Benutzer eine Website durchsucht.
• In React k?nnen Sie die document.cookie -API verwenden, benutzerdefinierte Hooks erstellen oder Bibliotheken von Drittanbietern verwenden, um Cookies zu implementieren. Die Sitzung in React kann über serverseitige Sitzungen oder tokenbasierte Authentifizierung implementiert werden.
• Best Practices für die Verwaltung von Sitzungen und Cookies in React geh?ren: Schutz von Cookies mit HttpOnly und secure Flags, Aktivierung von Sitzungen nach Ablauf und Token -Aktualisierung, Verschlüsselung sensibler Daten, Verwendung SameSite Attribute und Trennung von Authentifizierung und Anwendungsstatus.
• Bibliotheken von Drittanbietern wie JS-Cookies k?nnen die Cookie-Verwaltung in React-Anwendungen vereinfachen. Es wird empfohlen, Abh?ngigkeiten regelm??ig zu aktualisieren, um von Sicherheitspatches und Verbesserungen zu profitieren.
• regelm??ige Sicherheitsaudits und Tests sind unerl?sslich, um die Sicherheit der Anwendungen zu gew?hrleisten. Tools und Praktiken wie die Inhaltssicherheitsrichtlinie (CSP) k?nnen verwendet werden, um Sicherheitsrisiken zu verringern.

In diesem Artikel werden Technologien und Best Practices für die Implementierung von Cookies und Sitzungen in React untersucht.

Cookies und Sitzung sind unverzichtbare Komponenten der Webentwicklung. Sie sind das Medium für die Verwaltung von Benutzerdaten, Authentifizierung und Status.

Cookies sind kleine Datenmengen (bis zu 4096 Bytes), die im Webbrowser auf dem Ger?t des Benutzers gespeichert sind. Ein typischer Cookie sieht so aus (dies ist eine Google Analytics - _ga - Cookie):

<code>名稱：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路徑：/
過期/最大年齡：2022-03-12T05:12:53.000Z</code>

Cookie ist nur eine Zeichenfolge mit Schlüsselwertpaaren.

"Sitzung" bezieht sich auf die Zeit, in der der Benutzer die Website durchbaut. Sie repr?sentieren die kontinuierliche Aktivit?t des Benutzers über einen bestimmten Zeitraum.

In React k?nnen Cookies und Sitzungen uns helfen, robuste und sichere Anwendungen zu erstellen.

eingehende Grundlagen von Keksen und Sitzungen

Die Grundlagen von Cookies und Sitzungen verstehen, ist die Grundlage für die Entwicklung dynamischer und benutzerorientierter Webanwendungen.

In diesem Abschnitt werden die Konzepte von Cookies und Sitzungen auf eingehende Weise untersucht und ihre Typen, Lebenszyklen und typischen Anwendungsf?lle untersucht.

Cookie

Cookies verwalten in mehreren Anforderungen haupts?chlich Statusdaten zwischen dem Client und dem Server. Mit Cookies k?nnen Sie Daten von Benutzernautomaten speichern und abrufen und ein personalisierteres/nahtloses Browsing -Erlebnis bieten.

Cookie -Typ

Es gibt verschiedene Arten von Keksen, von denen jede perfekt für den beabsichtigten Anwendungsfall ist.

1. Sitzungscookies sind vorübergehend und existieren nur w?hrend der Benutzersitzungen. Sie speichern kurze Informationen wie Artikel in einem Einkaufswagen:

   <code>名稱：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路徑：/
   過期/最大年齡：2022-03-12T05:12:53.000Z</code>

2. Permanence Cookie hat ein Ablaufdatum und bleibt für einen l?ngeren Zeitraum auf der Maschine des Benutzers. Sie eignen sich für Funktionen wie das Remember Me -Feature:

   // 示例：設(shè)置會話 Cookie
   document.cookie = "sessionID=abc123; path=/";

Usercasen von Keksen in React

• Benutzerauthentifizierung. Wenn sich ein Benutzer erfolgreich anmeldet, wird ein Sitzungs -Token oder JWT (JSON Web Token) normalerweise in einem Cookie gespeichert:

  // 示例：設(shè)置具有過期日期的持久性 Cookie
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

• Benutzereinstellungen. Cookies speichern normalerweise Benutzerpr?ferenzen, z. B. die Auswahl der Themen oder die Spracheinstellungen, für eine bessere personalisierte Erfahrung.

  document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";

Sitzung

Definition und verwenden Sie

Sitzung stellt eine logische serverseitige Entit?t dar, die benutzerspezifische Daten w?hrend des Zugriffs speichert. Die Sitzung ist eng mit Cookies verwandt, wird jedoch auf unterschiedliche Weise gespeichert. (Cookie -Daten werden auf dem Server gespeichert.)

Serverseite und Client -Sitzung

• serverseitige Sitzung beinhaltet das Speichern von Sitzungsdaten auf dem Server. Frameworks wie express.js verwenden die serverseitige Sitzung, um den Benutzerstatus zu verwalten:

  // 示例：在 Cookie 中存儲用戶偏好設(shè)置
  document.cookie = "theme=dark; path=/";

• Client -Sitzung. Bei Verwendung von Client -Sitzungen müssen die Sitzung nicht replizieren, die Sitzung überprüfen oder den Datenspeicher zwischen Knoten abfragen. Obwohl "Client -Sitzung" m?glicherweise auf die Sitzungspeicherinformationen auf dem Client verweist, umfasst dies normalerweise die Verwendung von Cookies zum Speichern von Sitzungskennungen:

  // 使用 express-session 中間件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));

Verst?ndnis der Feinheiten von Cookies und Sitzungen hilft dabei, dynamische und interaktive Webanwendungen zu erstellen.

Der n?chste Abschnitt untersucht die tats?chliche Implementierung von Cookies und Sitzungen in React -Anwendungen.

Implementierung Cookies

Wie bereits erw?hnt, sind Cookies eine grundlegende Komponente von Webprozessen und React -Anwendungen.

So implementieren Sie Cookies in React:

• Verwenden document.cookie api
• Benutzerdefinierte Haken
erstellen
• Verwenden von Bibliotheken von Drittanbietern

Verwenden document.cookie api

Die grundlegendste M?glichkeit, Cookies in React zu verwenden, ist die document.cookie api. Es bietet eine einfache Schnittstelle zum Einstellen, Erhalten und L?schen von Cookies.

1. Cookies einstellen:

   // 示例：在客戶端的 Cookie 中存儲 Session ID
   document.cookie = "sessionID=abc123; path=/";

2. Holen Sie sich Cookies:

   // 設(shè)置 Cookie 的函數(shù)
   const setCookie = (name, value, days) => {
     const expirationDate = new Date();
     expirationDate.setDate(expirationDate.getDate() + days);
   
     document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
   };
   
   // 示例：設(shè)置一個在 7 天后過期的用戶名 Cookie
   setCookie("username", "john_doe", 7);

3. Cookie l?schen:

   // 按名稱獲取 Cookie 值的函數(shù)
   const getCookie = (name) => {
     const cookies = document.cookie
       .split("; ")
       .find((row) => row.startsWith(`${name}=`));
   
     return cookies ? cookies.split("=")[1] : null;
   };
   
   // 示例：獲取“username” Cookie 的值
   const username = getCookie("username");

Verwenden Sie benutzerdefinierte Haken, um Cookies zu verarbeiten

Erstellen Sie einen benutzerdefinierten React-Hook, um die kookiebezogenen Funktionen zu verkapseln, damit er zwischen den Komponenten wiederverwendet werden kann:

// 按名稱刪除 Cookie 的函數(shù)
const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};

// 示例：刪除“username” Cookie
deleteCookie("username");

Dieser benutzerdefinierte Hook useCookie gibt den aktuellen Wert des Cookies zurück, die Funktion, die den neuen Wert festlegt, und die Funktion, die das Cookie l?scht.

Verwenden von Bibliotheken von Drittanbietern

Bibliotheken von Drittanbietern wie JS-Cookies vereinfachen das Cookie-Management in React-Anwendungen.

1. Installationsbibliothek:

   // useCookie.js
   import { useState, useEffect } from "react";
   
   const useCookie = (cookieName) => {
     const [cookieValue, setCookieValue] = useState("");
   
     useEffect(() => {
       const cookie = document.cookie
         .split("; ")
         .find((row) => row.startsWith(`${cookieName}=`));
   
       setCookieValue(cookie ? cookie.split("=")[1] : "");
     }, [cookieName]);
   
     const setCookie = (value, expirationDate) => {
       document.cookie = `${cookieName}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
     };
   
     const deleteCookie = () => {
       document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
     };
   
     return [cookieValue, setCookie, deleteCookie];
   };
   
   // 在 React 組件中的用法
   const [username, setUsername, deleteUsername] = useCookie("username");

2. Verwendung in React -Komponenten:

   <code>名稱：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路徑：/
   過期/最大年齡：2022-03-12T05:12:53.000Z</code>

Die Verwendung von Bibliotheken von Drittanbietern wie JS-Cookies bietet eine einfache und bequeme API für die Cookie-Verwaltung in React-Komponenten.

Verst?ndnis dieser verschiedenen Ans?tze hilft uns, die zu w?hlen, die den Bedürfnissen und Komplexit?t unserer React -Anwendungen am besten entspricht.

Session

implementieren

In React -Anwendungen funktioniert die Sitzung auf der Serverseite, w?hrend die Sitzungskennungen Cookies verwenden, um auf der Client -Seite zu arbeiten.

Die Methoden zur Implementierung der Sitzung umfassen:

• Server -Seitensitzung
• Token-basierte Authentifizierung

Server -Seitensitzung

serverseitige Sitzung umfasst das Speichern von Sitzungsdaten auf dem Server. In React bedeutet dies, serverseitige Frameworks wie Express.js und Session Management Middleware zu verwenden.

1. setze Express.js mit Express-Session: Installieren Sie zun?chst das erforderliche Paket:

   // 示例：設(shè)置會話 Cookie
   document.cookie = "sessionID=abc123; path=/";

   Konfigurieren Sie nun Express:

   // 示例：設(shè)置具有過期日期的持久性 Cookie
   document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

   secret Wird verwendet, um Sitzungs -ID -Cookies zu signieren und eine zus?tzliche Sicherheitsebene hinzuzufügen.

2. Verwenden Sie die Sitzung im Routing: Nach der Konfiguration der Sitzung k?nnen wir sie in der Route verwenden:

   document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";

   Nach erfolgreichem Anmeldung werden Benutzerinformationen in der Sitzung gespeichert. Diese Informationen k?nnen durch nachfolgende Anfragen für die /profile Route zugegriffen werden.

Token-basierte Authentifizierung

Token-basierte Authentifizierung ist eine M?glichkeit, Sitzungen in modernen React-Anwendungen zu verwalten. Dazu geh?rt es, ein Token nach erfolgreicher Authentifizierung auf dem Server zu generieren, an den Client zu senden und es in den Header der nachfolgenden Anfragen aufzunehmen.

1. Token generieren und senden: Auf der Serverseite:

   // 示例：在 Cookie 中存儲用戶偏好設(shè)置
   document.cookie = "theme=dark; path=/";

   Der Server generiert einen JWT (JSON -Web -Token) und sendet ihn an den Client.

2. Token in die Anfrage einbeziehen: Auf dem Client (reagieren):

   // 使用 express-session 中間件
   const express = require('express');
   const session = require('express-session');
   const app = express();
   
   app.use(session({
     secret: 'your-secret-key',
     resave: false,
     saveUninitialized: true,
   }));

   Das obige verwendet den React -Kontext, um den Authentifizierungsstatus zu verwalten. Die Funktion login aktualisiert den Status mit dem empfangenen Token.

3. Token in Anfrage verwenden: Geben Sie es mit dem Token in den Header der Anfrage ein:

   // 示例：在客戶端的 Cookie 中存儲 Session ID
   document.cookie = "sessionID=abc123; path=/";

   Bei Anfrage bei Axios wird das Token automatisch zum Header hinzugefügt.

Beide Methoden helfen uns, unsere Sitzung effektiv zu verwalten und eine sichere und nahtlose Erfahrung zu bieten.

Best Practices für die Verwaltung von Sitzungen und Cookies in React

Handhabungssitzungen und Cookies in React-Anwendungen sind für die Erstellung sicherer, benutzerfreundlicher und leistungsstarker Webanwendungen von wesentlicher Bedeutung.

Um sicherzustellen, dass unsere React -Anwendung korrekt funktioniert, tun Sie Folgendes.

verwenden HttpOnly geben Sie gegebenenfalls die secure und

Logos immer ein.

• HttpOnly. Diese Flagge verhindert Angriffe auf Cookies über JavaScript oder einen anderen b?swilligen Code, wodurch das Risiko von XSS-Angriffen (Cross-Site-Skripten) verringert wird. Es stellt sicher, dass Cookies nur vom Server zug?nglich sind:

  <code>名稱：_ga
  值：GA1.3.210706468.1583989741
  域：.example.com
  路徑：/
  過期/最大年齡：2022-03-12T05:12:53.000Z</code>

• secure. Diese Flagge stellt sicher, dass Cookies nur über sichere verschlüsselte Verbindungen (HTTPS) gesendet werden. Es kann das Risiko von b?swilligem Benutzerabfangen abschw?chen:

  // 示例：設(shè)置會話 Cookie
  document.cookie = "sessionID=abc123; path=/";

Implementieren Sie die Sitzung und Token -Aktualisierung

Implementieren Sie für erweiterte Sicherheit die Ablauf des Sitzungssitzes und die Token -Aktualisierungseigenschaften. Das regelm??ige Auffrischen des Tokens oder die Festlegung der Ablaufzeit der Sitzung kann dazu beitragen, das Risiko eines nicht autorisierten Zugangs zu verringern.

• Token -Aktualisierung. Aktualisieren Sie das Authentifizierungs -Token, um sicherzustellen, dass der Benutzer authentifiziert bleibt. Dies h?ngt mit Anwendungen mit l?ngeren Benutzersitzungen zusammen.
• Sitzung abgelaufen. Legen Sie eine angemessene Ablaufzeit fest, um die Dauer der Benutzersitzung zu begrenzen. Dies hilft, eine Entführungs von Sitzungen zu verhindern.

// 示例：設(shè)置具有過期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

/login Der Endpunkt gibt nach erfolgreicher Authentifizierung das anf?ngliche JWT -Token zurück. /refresh-token Der Endpunkt verwendet das Aktualisierungstoken, um ein neues Zugriffstoken zu generieren.

Verschlüsseln Sie sensible Daten

Vermeiden Sie es, vertrauliche Informationen direkt in Cookies oder Sitzungen zu speichern. Um sensible Daten unter unvermeidlichen Umst?nden beizubehalten, verschlüsseln Sie sie vor dem Speichern. Die Verschlüsselung fügt eine zus?tzliche Sicherheitsebene hinzu, die es schwieriger macht, auf vertrauliche Informationen zuzugreifen, auch wenn b?swillige Benutzer Daten abfangen:

document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";

Verwenden SameSite Eigenschaften

Das Attribut

SameSite hilft, Angriffe (CSRF) für die Anforderung (CSRF) zu verhindern, indem angegeben wird, wann Cookies zusammen mit Cross-Site-Anfragen gesendet werden.

• Strict. Cookies werden nur in einem First-Anbieter-Kontext gesendet, um zu verhindern, dass Websites von Drittanbietern im Namen der Benutzer Anfragen stellen.

  // 示例：在 Cookie 中存儲用戶偏好設(shè)置
  document.cookie = "theme=dark; path=/";

• Lax. Erlauben Sie uns, Cookies mithilfe der Navigation auf h?chster Ebene zu senden (z.

  // 使用 express-session 中間件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));

separate Authentifizierung und Anwendungsstatus

Vermeiden Sie es, den gesamten Anwendungsstatus in einem Cookie oder einer Sitzung zu speichern. Separate Authentifizierungsdaten von anderen Anwendungszust?nden, um Klarheit aufrechtzuerhalten und das Risiko einer Exposition gegenüber sensiblen Informationen zu minimieren:

// 示例：在客戶端的 Cookie 中存儲 Session ID
document.cookie = "sessionID=abc123; path=/";

Verwenden Sie Bibliotheken von Drittanbietern für Cookie Management

Erw?gen Sie, eine ausgereifte Bibliothek von Drittanbietern für das Cookie-Management zu verwenden. Die Bibliothek wie JS-Cookie bietet eine einfache und bequeme API, die die Komplexit?t der nativen

API abstrahiert: document.cookie

// 設(shè)置 Cookie 的函數(shù)
const setCookie = (name, value, days) => {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);

  document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
};

// 示例：設(shè)置一個在 7 天后過期的用戶名 Cookie
setCookie("username", "john_doe", 7);

verwandte Aktualisierungen zu Abh?ngigkeiten

Halten Sie Bibliotheken und Frameworks von Drittanbietern auf dem neuesten Stand, um von Sicherheitspatches und Verbesserungen zu profitieren. Regelm??ige Aktualisierungen der Abh?ngigkeiten stellen sicher, dass unsere Anwendungen nicht anf?llig für bekannte Schwachstellen sind.

Testsicherheitsma?nahmen

Besprechen Sie Ihre Bewerbung regelm??ig für Sicherheitsaudits und Tests. Dies beinhaltet das Testen h?ufiger Schwachstellen wie XSS und CSRF. Erw?gen Sie, Sicherheitsinstrumente und -praktiken wie CPSP -Richtlinien (Content Security Policy) zu verwenden, um Sicherheitsrisiken zu verringern.

Zusammenfassung

Cookies und Sitzung sind nützliche Werkzeuge zum Erstellen sicherer und effizienter React -Anwendungen. Sie werden verwendet, um die Benutzerauthentifizierung zu verwalten, Benutzerpr?ferenzen zu bewahren oder staatliche Interaktionen zu erm?glichen.

Wenn wir Best Practices befolgen und bew?hrte Bibliotheken verwenden, k?nnen wir robuste und zuverl?ssige Anwendungen erstellen, die eine nahtlose Benutzererfahrung bieten und gleichzeitig die Sicherheit priorisieren.

Wenn Ihnen dieser Artikel gef?llt, lesen Sie bitte andere aufregende Ressourcen von SitePoint:

• reagieren Sie die Leistungsoptimierung
• Beste React -Diagramm -Bibliothek von 2024
• 6 Techniken zum bedingten Rendering in React mit Beispielen

Das obige ist der detaillierte Inhalt vonKekse und Sitzungen in React verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!