關(guān)鍵要點(diǎn)

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

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

Cookie 和 Session 是 Web 開發(fā)不可或缺的組件。它們是管理用戶數(shù)據(jù)、身份驗(yàn)證和狀態(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 主要在多個請求中維護(hù)客戶端和服務(wù)器之間的狀態(tài)數(shù)據(jù)。 Cookie 使您可以存儲和檢索用戶機(jī)器上的數(shù)據(jù)，從而提供更個性化/無縫的瀏覽體驗(yàn)。

Cookie 類型

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

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

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

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

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

React 中 Cookie 的用例

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

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

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

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

Session

定義和用途

Session 代表一個邏輯的服務(wù)器端實(shí)體，用於在訪問期間存儲特定於用戶的數(shù)據(jù)。 Session 與 Cookie 密切相關(guān)，但存儲方式不同；會話標(biāo)識符通常在客戶端存儲 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é)點(diǎn)之間複製、驗(yàn)證 Session 或查詢數(shù)據(jù)存儲。雖然“客戶端 Session” 可能指的是客戶端上的 Session 存儲信息，但它通常涉及使用 Cookie 來存儲 Session 標(biāo)識符：

  // 使用 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 的細(xì)微之處有助於構(gòu)建動態(tài)和交互式 Web 應(yīng)用程序。

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

實(shí)現(xiàn) Cookie

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

在 React 中實(shí)現(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 的當(dāng)前值、設(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)用程序的需求和復(fù)雜性的方法。

實(shí)現(xiàn) Session

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

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

• 服務(wù)器端 Session
• 基於令牌的身份驗(yàn)證

服務(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 路由的請求可以訪問此信息。

基於令牌的身份驗(yàn)證

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

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 來管理身份驗(yàn)證狀態(tài)。 login 函數(shù)使用接收到的令牌更新狀態(tài)。

3. 在請求中使用令牌： 有了令牌後，將其包含在請求的標(biāo)頭中：

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

   使用 Axios 進(jìn)行請求時，令牌會自動添加到標(biāo)頭中。

這兩種方法都有助於我們有效地管理 Session，提供安全無縫的體驗(yàn)。

在 React 中管理 Session 和 Cookie 的最佳實(shí)踐

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

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

使用 HttpOnly 和 secure 標(biāo)誌保護(hù) Cookie

始終在適用的情況下包含 HttpOnly 和 secure 標(biāo)誌。

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

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

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

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

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

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

• 令牌刷新。刷新身份驗(yàn)證令牌以確保用戶保持身份驗(yà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 端點(diǎn)在成功身份驗(yàn)證後返回初始 JWT 令牌。 /refresh-token 端點(diǎn)使用刷新令牌生成新的訪問令牌。

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

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

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

使用 SameSite 屬性

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

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

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

• Lax。允許我們使用頂級導(dǎo)航（例如單擊鏈接時）發(fā)送 Cookie，但不允許使用第三方網(wǎng)站發(fā)起的跨站點(diǎn) 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àn)證和應(yīng)用程序狀態(tài)

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

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

利用第三方庫進(jìn)行 Cookie 管理

考慮使用成熟的第三方庫進(jìn)行 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)，以受益於安全補(bǔ)丁和改進(jìn)。定期更新依賴項可確保我們的應(yīng)用程序不易受到已知漏洞的影響。

測試安全措施

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

總結(jié)

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

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

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

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

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