了解React中的餅乾和會話

關鍵要點

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

本文將探討在 React 中實現 Cookie 和 Session 的技術和最佳實踐。

Cookie 和 Session 是 Web 開發不可或缺的組件。它們是管理用戶數據、身份驗證和狀態的媒介。

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

<code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>

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

“Session” 指的是用戶瀏覽網站的時間。它們代表用戶在一段時間內的連續活動。

在 React 中，Cookie 和 Session 有助於我們創建健壯且安全的應用程序。

Cookie 和 Session 的深入基礎知識

了解 Cookie 和 Session 的基礎知識是開發動態和以用戶為中心的 Web 應用程序的基礎。

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

Cookie

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

Cookie 類型

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

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

   <code>名称：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路径：/
   过期/最大年龄：2022-03-12T05:12:53.000Z</code>

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

   // 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";

React 中 Cookie 的用例

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

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

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

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

Session

定義和用途

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

服務器端與客戶端 Session

• 服務器端 Session 涉及在服務器上存儲 Session 數據。像 Express.js 這樣的框架使用服務器端 Session 來管理用戶狀態：

  // 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";

• 客戶端 Session。 使用客戶端 Session 時，無需在節點之間複製、驗證 Session 或查詢數據存儲。雖然“客戶端 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 的細微之處有助於構建動態和交互式 Web 應用程序。

下一節將探討在 React 應用程序中 Cookie 和 Session 的實際實現。

實現 Cookie

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

在 React 中實現 Cookie 的方法包括：

• 使用 document.cookie API
• 創建自定義 Hook
• 使用第三方庫

使用 document.cookie API

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

1. 設置 Cookie：

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

2. 獲取 Cookie：

   // 设置 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);

3. 刪除 Cookie：

   // 按名称获取 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");

使用自定義 Hook 來處理 Cookie

創建自定義 React Hook 可以封裝與 Cookie 相關的功能，使其可以在組件之間重複使用：

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

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

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

使用第三方庫

諸如 js-cookie 之類的第三方庫簡化了 React 應用程序中的 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 應用程序的需求和復雜性的方法。

實現 Session

在 React 應用程序中，Session 在服務器端工作，而 Session 標識符使用 Cookie 在客戶端工作。

實現 Session 的方法包括：

• 服務器端 Session
• 基於令牌的身份驗證

服務器端 Session

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

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

   // 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";

   現在，配置 Express：

   // 示例：设置具有过期日期的持久性 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 路由的請求可以訪問此信息。

基於令牌的身份驗證

基於令牌的身份驗證是在現代 React 應用程序中管理 Session 的一種方法。它涉及在服務器上成功身份驗證後生成令牌，將其發送到客戶端，並將其包含在後續請求的標頭中。

1. 生成和發送令牌： 在服務器端：

   // 示例：在 Cookie 中存储用户偏好设置
   document.cookie = "theme=dark; path=/";

   服務器生成 JWT（JSON Web 令牌）並將其發送到客戶端。

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 來管理身份驗證狀態。 login 函數使用接收到的令牌更新狀態。

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

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

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

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

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

在 React 應用程序中處理 Session 和 Cookie 對於構建安全、用戶友好和高性能的 Web 應用程序至關重要。

為了確保我們的 React 應用程序正常工作，請執行以下操作。

使用 HttpOnly 和 secure 標誌保護 Cookie

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

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

  <code>名称：_ga
  值：GA1.3.210706468.1583989741
  域：.example.com
  路径：/
  过期/最大年龄：2022-03-12T05:12:53.000Z</code>

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

  // 示例：设置会话 Cookie
  document.cookie = "sessionID=abc123; path=/";

實現 Session 過期和令牌刷新

為了增強安全性，請實現 Session 過期和令牌刷新屬性。定期刷新令牌或設置 Session 過期時間有助於減輕未經授權訪問的風險。

• 令牌刷新。刷新身份驗證令牌以確保用戶保持身份驗證狀態。這與具有較長用戶會話的應用程序相關。
• Session 過期。設置合理的 Session 過期時間以限制用戶 Session 的持續時間。這有助於防止 Session 劫持。

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

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

加密敏感數據

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

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

使用 SameSite 屬性

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

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

  // 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";

• Lax。允許我們使用頂級導航（例如單擊鏈接時）發送 Cookie，但不允許使用第三方網站發起的跨站點 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,
  }));

分離身份驗證和應用程序狀態

避免在 Cookie 或 Session 中存儲整個應用程序狀態。將身份驗證數據與其他應用程序相關狀態分開，以保持清晰度並最大限度地減少暴露敏感信息的風險：

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

利用第三方庫進行 Cookie 管理

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

// 设置 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);

定期更新依賴項

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

測試安全措施

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

總結

Cookie 和 Session 是構建安全高效的 React 應用程序的有用工具。它們用於管理用戶身份驗證、保留用戶首選項或實現有狀態交互。

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

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

• React 性能優化
• 2024 年最佳 React 圖表庫
• React 中條件渲染的 6 種技術，附示例

以上是了解React中的餅乾和會話的詳細內容。更多資訊請關注PHP中文網其他相關文章！