Kekse und Sitzungen in React verstehen

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:

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

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:

  <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

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

  <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

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:

  <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";</code>

• 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:

  <code class="language-javascript">// 使用 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,
  }));</code>

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:

   <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
   document.cookie = "sessionID=abc123; path=/";</code>

2. Holen Sie sich Cookies:

   <code class="language-javascript">// 设置 Cookie 的函数
   const setCookie = (name, value, days) => {
     const expirationDate = new Date();
     expirationDate.setDate(expirationDate.getDate() + days);
   
     document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
   };
   
   // 示例：设置一个在 7 天后过期的用户名 Cookie
   setCookie("username", "john_doe", 7);</code>

3. Cookie löschen:

   <code class="language-javascript">// 按名称获取 Cookie 值的函数
   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");</code>

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:

<code class="language-javascript">// 按名称删除 Cookie 的函数
const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};

// 示例：删除“username” Cookie
deleteCookie("username");</code>

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:

   <code class="language-javascript">// 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");</code>

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:

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

   Konfigurieren Sie nun Express:

   <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
   document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

   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:

   <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

   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:

   <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
   document.cookie = "theme=dark; path=/";</code>

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

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

   <code class="language-javascript">// 使用 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,
   }));</code>

   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:

   <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
   document.cookie = "sessionID=abc123; path=/";</code>

   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:

  <code class="language-javascript">// 示例：设置会话 Cookie
  document.cookie = "sessionID=abc123; path=/";</code>

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.

<code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

/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:

<code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

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.

  <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";</code>

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

  <code class="language-javascript">// 使用 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,
  }));</code>

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:

<code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
document.cookie = "sessionID=abc123; path=/";</code>

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

<code class="language-javascript">// 设置 Cookie 的函数
const setCookie = (name, value, days) => {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);

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

// 示例：设置一个在 7 天后过期的用户名 Cookie
setCookie("username", "john_doe", 7);</code>

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!