關(guān)鍵要點

• Cookie 和 Session 是 Web 開發(fā)中至關(guān)重要的組成部分，用于管理用戶數(shù)據(jù)、身份驗證和狀態(tài)。Cookie 是 Web 瀏覽器存儲在用戶設(shè)備上的少量數(shù)據(jù)塊，而 Session 指的是用戶瀏覽網(wǎng)站的時間。
• 在 React 中，可以使用 document.cookie API、創(chuàng)建自定義 Hook 或使用第三方庫來實現(xiàn) Cookie。React 中的 Session 可以通過服務(wù)器端 Session 或基于令牌的身份驗證來實現(xiàn)。
• 在 React 中管理 Session 和 Cookie 的最佳實踐包括：使用 HttpOnly 和 secure 標志保護 Cookie，實現(xiàn) Session 過期和令牌刷新，加密敏感數(shù)據(jù)，使用 SameSite 屬性以及分離身份驗證和應(yīng)用程序狀態(tài)。
• 第三方庫（例如 js-cookie）可以簡化 React 應(yīng)用程序中的 Cookie 管理。建議定期更新依賴項，以受益于安全補丁和改進。
• 定期進行安全審計和測試對于確保應(yīng)用程序安全至關(guān)重要。可以使用諸如內(nèi)容安全策略 (CSP) 之類的工具和實踐來降低安全風險。

本文將探討在 React 中實現(xiàn) Cookie 和 Session 的技術(shù)和最佳實踐。

Cookie 和 Session 是 Web 開發(fā)不可或缺的組件。它們是管理用戶數(shù)據(jù)、身份驗證和狀態(tài)的媒介。

Cookie 是 Web 服務(wù)器代表存儲在用戶設(shè)備上的 Web 瀏覽器中的少量數(shù)據(jù)（最大 4096 字節(jié)）。典型的 Cookie 看起來像這樣（這是一個 Google Analytics — _ga — Cookie）：

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

Cookie 只是具有鍵值對的字符串。

“Session” 指的是用戶瀏覽網(wǎng)站的時間。它們代表用戶在一段時間內(nèi)的連續(xù)活動。

在 React 中，Cookie 和 Session 有助于我們創(chuàng)建健壯且安全的應(yīng)用程序。

Cookie 和 Session 的深入基礎(chǔ)知識

了解 Cookie 和 Session 的基礎(chǔ)知識是開發(fā)動態(tài)和以用戶為中心的 Web 應(yīng)用程序的基礎(chǔ)。

本節(jié)將更深入地探討 Cookie 和 Session 的概念，探討它們的類型、生命周期和典型用例。

Cookie

Cookie 主要在多個請求中維護客戶端和服務(wù)器之間的狀態(tài)數(shù)據(jù)。Cookie 使您可以存儲和檢索用戶機器上的數(shù)據(jù)，從而提供更個性化/無縫的瀏覽體驗。

Cookie 類型

有各種類型的 Cookie，每種 Cookie 都非常適合其預期的用例。

1. 會話 Cookie 是臨時的，僅存在于用戶會話期間。它們存儲短暫信息，例如購物車中的商品：

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

2. 持久性 Cookie 有一個過期日期，并且會在用戶機器上保留更長時間。它們適用于諸如“記住我”功能之類的功能：

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

React 中 Cookie 的用例

• 用戶身份驗證。當用戶成功登錄時，會話令牌或 JWT（JSON Web 令牌）通常存儲在 Cookie 中：

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

• 用戶偏好設(shè)置。Cookie 通常存儲用戶偏好設(shè)置，例如主題選擇或語言設(shè)置，以獲得更好的個性化體驗。

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

Session

定義和用途

Session 代表一個邏輯的服務(wù)器端實體，用于在訪問期間存儲特定于用戶的數(shù)據(jù)。Session 與 Cookie 密切相關(guān)，但存儲方式不同；會話標識符通常在客戶端存儲 Cookie。（Cookie 數(shù)據(jù)存儲在服務(wù)器上。）

服務(wù)器端與客戶端 Session

• 服務(wù)器端 Session 涉及在服務(wù)器上存儲 Session 數(shù)據(jù)。像 Express.js 這樣的框架使用服務(wù)器端 Session 來管理用戶狀態(tài)：

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

• 客戶端 Session。使用客戶端 Session 時，無需在節(jié)點之間復制、驗證 Session 或查詢數(shù)據(jù)存儲。雖然“客戶端 Session” 可能指的是客戶端上的 Session 存儲信息，但它通常涉及使用 Cookie 來存儲 Session 標識符：

  // 使用 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,
  }));

了解 Cookie 和 Session 的細微之處有助于構(gòu)建動態(tài)和交互式 Web 應(yīng)用程序。

下一節(jié)將探討在 React 應(yīng)用程序中 Cookie 和 Session 的實際實現(xiàn)。

實現(xiàn) Cookie

如前所述，Cookie 是 Web 進程和 React 應(yīng)用程序的基本組成部分。

在 React 中實現(xiàn) Cookie 的方法包括：

• 使用 document.cookie API
• 創(chuàng)建自定義 Hook
• 使用第三方庫

使用 document.cookie API

在 React 中使用 Cookie 的最基本方法是通過 document.cookie API。它提供了一個簡單的界面來設(shè)置、獲取和刪除 Cookie。

1. 設(shè)置 Cookie：

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

2. 獲取 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);

3. 刪除 Cookie：

   // 按名稱獲取 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");

使用自定義 Hook 來處理 Cookie

創(chuàng)建自定義 React Hook 可以封裝與 Cookie 相關(guān)的功能，使其可以在組件之間重復使用：

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

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

此自定義 Hook useCookie 返回 Cookie 的當前值、設(shè)置新值的函數(shù)和刪除 Cookie 的函數(shù)。

使用第三方庫

諸如 js-cookie 之類的第三方庫簡化了 React 應(yīng)用程序中的 Cookie 管理。

1. 安裝庫：

   // 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. 在 React 組件中的用法：

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

使用 js-cookie 等第三方庫為 React 組件中的 Cookie 管理提供了簡潔方便的 API。

了解這些不同的方法有助于我們選擇最適合我們 React 應(yīng)用程序的需求和復雜性的方法。

實現(xiàn) Session

在 React 應(yīng)用程序中，Session 在服務(wù)器端工作，而 Session 標識符使用 Cookie 在客戶端工作。

實現(xiàn) Session 的方法包括：

• 服務(wù)器端 Session
• 基于令牌的身份驗證

服務(wù)器端 Session

服務(wù)器端 Session 涉及在服務(wù)器上存儲 Session 數(shù)據(jù)。在 React 中，這意味著使用像 Express.js 這樣的服務(wù)器端框架以及 Session 管理中間件。

1. 使用 express-session 設(shè)置 Express.js： 首先，安裝所需的包：

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

   現(xiàn)在，配置 Express：

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

   secret 用于簽名 Session ID Cookie，增加了額外的安全層。

2. 在路由中使用 Session： 配置 Session 后，我們可以在路由中使用它們：

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

   成功登錄后，用戶信息將存儲在 Session 中。隨后對 /profile 路由的請求可以訪問此信息。

基于令牌的身份驗證

基于令牌的身份驗證是在現(xiàn)代 React 應(yīng)用程序中管理 Session 的一種方法。它涉及在服務(wù)器上成功身份驗證后生成令牌，將其發(fā)送到客戶端，并將其包含在后續(xù)請求的標頭中。

1. 生成和發(fā)送令牌： 在服務(wù)器端：

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

   服務(wù)器生成 JWT（JSON Web 令牌）并將其發(fā)送到客戶端。

2. 在請求中包含令牌： 在客戶端（React）：

   // 使用 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,
   }));

   上面使用 React Context 來管理身份驗證狀態(tài)。login 函數(shù)使用接收到的令牌更新狀態(tài)。

3. 在請求中使用令牌： 有了令牌后，將其包含在請求的標頭中：

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

   使用 Axios 進行請求時，令牌會自動添加到標頭中。

這兩種方法都有助于我們有效地管理 Session，提供安全無縫的體驗。

在 React 中管理 Session 和 Cookie 的最佳實踐

在 React 應(yīng)用程序中處理 Session 和 Cookie 對于構(gòu)建安全、用戶友好和高性能的 Web 應(yīng)用程序至關(guān)重要。

為了確保我們的 React 應(yīng)用程序正常工作，請執(zhí)行以下操作。

使用 HttpOnly 和 secure 標志保護 Cookie

始終在適用的情況下包含 HttpOnly 和 secure 標志。

• HttpOnly。此標志可防止通過 JavaScript 或任何其他惡意代碼對 Cookie 進行攻擊，從而降低跨站點腳本 (XSS) 攻擊的風險。它確保 Cookie 只能由服務(wù)器訪問：

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

• secure。此標志確保 Cookie 僅通過安全加密連接 (HTTPS) 發(fā)送。它可以減輕惡意用戶攔截的風險：

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

實現(xiàn) Session 過期和令牌刷新

為了增強安全性，請實現(xiàn) Session 過期和令牌刷新屬性。定期刷新令牌或設(shè)置 Session 過期時間有助于減輕未經(jīng)授權(quán)訪問的風險。

• 令牌刷新。刷新身份驗證令牌以確保用戶保持身份驗證狀態(tài)。這與具有較長用戶會話的應(yīng)用程序相關(guān)。
• Session 過期。設(shè)置合理的 Session 過期時間以限制用戶 Session 的持續(xù)時間。這有助于防止 Session 劫持。

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

/login 端點在成功身份驗證后返回初始 JWT 令牌。/refresh-token 端點使用刷新令牌生成新的訪問令牌。

加密敏感數(shù)據(jù)

避免直接在 Cookie 或 Session 中存儲敏感信息。為了在不可避免的情況下保留敏感數(shù)據(jù)，請在存儲之前對其進行加密。加密增加了額外的安全層，即使惡意用戶攔截了數(shù)據(jù)，也使其更難以訪問敏感信息：

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

使用 SameSite 屬性

SameSite 屬性通過指定何時將 Cookie 與跨站點請求一起發(fā)送來幫助防止跨站點請求偽造 (CSRF) 攻擊。

• Strict。Cookie 僅在第一方上下文中發(fā)送，防止第三方網(wǎng)站代表用戶發(fā)出請求。

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

• Lax。允許我們使用頂級導航（例如單擊鏈接時）發(fā)送 Cookie，但不允許使用第三方網(wǎng)站發(fā)起的跨站點 POST 請求：

  // 使用 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,
  }));

分離身份驗證和應(yīng)用程序狀態(tài)

避免在 Cookie 或 Session 中存儲整個應(yīng)用程序狀態(tài)。將身份驗證數(shù)據(jù)與其他應(yīng)用程序相關(guān)狀態(tài)分開，以保持清晰度并最大限度地減少暴露敏感信息的風險：

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

利用第三方庫進行 Cookie 管理

考慮使用成熟的第三方庫進行 Cookie 管理。像 js-cookie 這樣的庫提供了簡潔方便的 API，抽象了原生 document.cookie API 的復雜性：

// 設(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);

定期更新依賴項

保持第三方庫和框架的最新狀態(tài)，以受益于安全補丁和改進。定期更新依賴項可確保我們的應(yīng)用程序不易受到已知漏洞的影響。

測試安全措施

對您的應(yīng)用程序定期進行安全審計和測試。這包括測試常見的漏洞，例如 XSS 和 CSRF。考慮使用安全工具和實踐（如內(nèi)容安全策略 (CSP)）來降低安全風險。

總結(jié)

Cookie 和 Session 是構(gòu)建安全高效的 React 應(yīng)用程序的有用工具。它們用于管理用戶身份驗證、保留用戶首選項或?qū)崿F(xiàn)有狀態(tài)交互。

通過遵循最佳實踐并使用成熟的庫，我們可以創(chuàng)建健壯且可靠的應(yīng)用程序，這些應(yīng)用程序提供無縫的用戶體驗，同時優(yōu)先考慮安全性。

如果您喜歡這篇文章，請查看 SitePoint 提供的其他精彩資源：

• React 性能優(yōu)化
• 2024 年最佳 React 圖表庫
• React 中條件渲染的 6 種技術(shù)，附示例

以上是了解React中的餅干和會話的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！