关键要点
document.cookie API、创建自定义 Hook 或使用第三方库来实现 Cookie。React 中的 Session 可以通过服务器端 Session 或基于令牌的身份验证来实现。HttpOnly 和 secure 标志保护 Cookie，实现 Session 过期和令牌刷新，加密敏感数据，使用 SameSite 属性以及分离身份验证和应用程序状态。本文将探讨在 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 的基础知识是开发动态和以用户为中心的 Web 应用程序的基础。
本节将更深入地探讨 Cookie 和 Session 的概念，探讨它们的类型、生命周期和典型用例。
Cookie 主要在多个请求中维护客户端和服务器之间的状态数据。Cookie 使您可以存储和检索用户机器上的数据，从而提供更个性化/无缝的浏览体验。
有各种类型的 Cookie，每种 Cookie 都非常适合其预期的用例。
<code>名称：_ga 值：GA1.3.210706468.1583989741 域：.example.com 路径：/ 过期/最大年龄：2022-03-12T05:12:53.000Z</code>
// 示例：设置会话 Cookie document.cookie = "sessionID=abc123; path=/";
// 示例：设置具有过期日期的持久性 Cookie document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";
Session 代表一个逻辑的服务器端实体，用于在访问期间存储特定于用户的数据。Session 与 Cookie 密切相关，但存储方式不同；会话标识符通常在客户端存储 Cookie。（Cookie 数据存储在服务器上。）
服务器端 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 是 Web 进程和 React 应用程序的基本组成部分。
在 React 中实现 Cookie 的方法包括：
document.cookie APIdocument.cookie API在 React 中使用 Cookie 的最基本方法是通过 document.cookie API。它提供了一个简单的界面来设置、获取和删除 Cookie。
设置 Cookie：
// 示例：在客户端的 Cookie 中存储 Session ID document.cookie = "sessionID=abc123; path=/";
获取 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);删除 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");创建自定义 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 管理。
安装库：
// 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");在 React 组件中的用法：
<code>名称：_ga 值：GA1.3.210706468.1583989741 域：.example.com 路径：/ 过期/最大年龄：2022-03-12T05:12:53.000Z</code>
使用 js-cookie 等第三方库为 React 组件中的 Cookie 管理提供了简洁方便的 API。
了解这些不同的方法有助于我们选择最适合我们 React 应用程序的需求和复杂性的方法。
在 React 应用程序中，Session 在服务器端工作，而 Session 标识符使用 Cookie 在客户端工作。
实现 Session 的方法包括：
服务器端 Session 涉及在服务器上存储 Session 数据。在 React 中，这意味着使用像 Express.js 这样的服务器端框架以及 Session 管理中间件。
使用 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，增加了额外的安全层。
在路由中使用 Session： 配置 Session 后，我们可以在路由中使用它们：
document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";
成功登录后，用户信息将存储在 Session 中。随后对 /profile 路由的请求可以访问此信息。
基于令牌的身份验证是在现代 React 应用程序中管理 Session 的一种方法。它涉及在服务器上成功身份验证后生成令牌，将其发送到客户端，并将其包含在后续请求的标头中。
生成和发送令牌： 在服务器端：
// 示例：在 Cookie 中存储用户偏好设置 document.cookie = "theme=dark; path=/";
服务器生成 JWT（JSON Web 令牌）并将其发送到客户端。
在请求中包含令牌： 在客户端（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 函数使用接收到的令牌更新状态。
在请求中使用令牌： 有了令牌后，将其包含在请求的标头中：
// 示例：在客户端的 Cookie 中存储 Session ID document.cookie = "sessionID=abc123; path=/";
使用 Axios 进行请求时，令牌会自动添加到标头中。
这两种方法都有助于我们有效地管理 Session，提供安全无缝的体验。
在 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 过期时间有助于减轻未经授权访问的风险。
// 示例：设置具有过期日期的持久性 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 管理。像 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中的饼干和会话的详细内容。更多信息请关注PHP中文网其他相关文章！
