Points clés
document.cookie, créer des crochets personnalisés ou utiliser des bibliothèques tierces pour implémenter des cookies. La session dans React peut être implémentée via une session côté serveur ou une authentification basée sur les jetons. HttpOnly et secure, d'activation l'expiration de la session et de rafraîchir les jetons, de crypter des données sensibles, en utilisant les attributs SameSite et la séparation de l'authentification et de l'état de l'application. Cet article explorera les technologies et les meilleures pratiques pour mettre en œuvre des cookies et des sessions dans React.
Les cookies et la session sont des composants indispensables du développement Web. Ils sont le moyen de gérer les données des utilisateurs, l'authentification et le statut.
Les cookies sont de petites quantités de données (jusqu'à 4096 octets) stockées dans le navigateur Web sur l'appareil de l'utilisateur. Un cookie typique ressemble à ceci (il s'agit d'une Google Analytics - _ga - cookie):
<code>名称：_ga 值：GA1.3.210706468.1583989741 域：.example.com 路径：/ 过期/最大年龄：2022-03-12T05:12:53.000Z</code>
Le cookie n'est qu'une chaîne avec des paires de valeurs clés.
"Session" fait référence au moment où l'utilisateur parcourt le site Web. Ils représentent l'activité continue de l'utilisateur sur une période de temps.
Dans React, les cookies et les sessions nous aident à créer des applications robustes et sécurisées.
Comprendre les bases des cookies et des sessions est le fondement du développement d'applications Web dynamiques et centrées sur l'utilisateur.
Cette section explorera les concepts de cookies et de sessions de manière plus approfondie, explorant leurs types, leurs cycles de vie et leurs cas d'utilisation typiques.
Les cookies maintiennent principalement les données d'état entre le client et le serveur dans plusieurs demandes. Les cookies vous permettent de stocker et de récupérer des données des machines des utilisateurs, offrant une expérience de navigation plus personnalisée / sans couture.
Il existe différents types de cookies, dont chacun est parfait pour son cas d'utilisation prévu.
<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=/";
La session représente une entité logique côté serveur qui stocke les données spécifiques à l'utilisateur pendant l'accès. La session est étroitement liée aux cookies, mais est stocké de différentes manières; (Les données des cookies sont stockées sur le serveur.)
La session côté serveur implique le stockage des données de session sur le serveur. Des cadres comme express.js utilisent la session côté serveur pour gérer l'état de l'utilisateur:
// 示例：在 Cookie 中存储用户偏好设置 document.cookie = "theme=dark; path=/";
Session client. Lorsque vous utilisez des sessions clients, il n'est pas nécessaire de reproduire, de vérifier la session ou de demander le magasin de données entre les nœuds. Bien que la «session du client» puisse se référer aux informations de stockage de session sur le client, elle implique généralement l'utilisation de cookies pour stocker les identificateurs de 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,
}));Comprendre les subtilités des cookies et des sessions aide à créer des applications Web dynamiques et interactives.
La section suivante explorera la mise en œuvre réelle des cookies et des sessions dans les applications React.
Comme mentionné précédemment, les cookies sont un composant de base des processus Web et des applications de réaction.
Comment implémenter les cookies dans React incluent:
document.cookie api document.cookie api La façon la plus élémentaire d'utiliser des cookies dans React est via l'API document.cookie. Il fournit une interface simple pour définir, obtenir et supprimer des cookies.
Définir les cookies:
// 示例：在客户端的 Cookie 中存储 Session ID document.cookie = "sessionID=abc123; path=/";
Obtenez des cookies:
// 设置 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);Supprimer le 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");Créez un crochet React personnalisé pour encapsuler les fonctionnalités liées aux cookies afin qu'il puisse être réutilisé entre les composants:
// 按名称删除 Cookie 的函数
const deleteCookie = (name) => {
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};
// 示例：删除“username” Cookie
deleteCookie("username"); Ce crochet personnalisé useCookie renvoie la valeur actuelle du cookie, la fonction qui définit la nouvelle valeur et la fonction qui supprime le cookie.
Les bibliothèques tierces telles que JS-Cookies simplifient la gestion des cookies dans les applications React.
Bibliothèque d'installation:
// 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");Utilisation dans les composants de réaction:
<code>名称：_ga 值：GA1.3.210706468.1583989741 域：.example.com 路径：/ 过期/最大年龄：2022-03-12T05:12:53.000Z</code>
L'utilisation de bibliothèques tierces telles que JS-Cookies fournit une API simple et pratique pour la gestion des cookies dans les composants React.
Comprendre ces différentes approches nous aide à choisir celui qui convient le mieux aux besoins et à la complexité de nos applications de réaction.
Dans les applications React, la session fonctionne du côté du serveur, tandis que les identificateurs de session utilisent des cookies pour travailler du côté client.
Les méthodes pour implémenter la session comprennent:
La session côté serveur implique le stockage des données de session sur le serveur. Dans React, cela signifie l'utilisation de cadres côté serveur comme Express.js et Middleware de gestion de session.
Set Express.js en utilisant Express-Session: Tout d'abord, installez le package requis:
// 示例：设置会话 Cookie document.cookie = "sessionID=abc123; path=/";
Maintenant, configure express:
// 示例：设置具有过期日期的持久性 Cookie document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
secret Utilisé pour signer des cookies d'ID de session, ajoutant une couche supplémentaire de sécurité.
Utiliser la session dans le routage: Après la configuration de la session, nous pouvons les utiliser dans l'itinéraire:
document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";
Après avoir réussi à se connecter, les informations de l'utilisateur seront stockées dans la session. Ces informations sont accessibles par des demandes ultérieures pour l'itinéraire /profile.
L'authentification basée sur les jetons est un moyen de gérer les sessions dans les applications REACT modernes. Il s'agit de générer un jeton après une authentification réussie sur le serveur, de l'envoyer au client et de l'inclure dans l'en-tête des demandes suivantes.
générer et envoyer des jetons: Du côté du serveur:
// 示例：在 Cookie 中存储用户偏好设置 document.cookie = "theme=dark; path=/";
Le serveur génère un JWT (jeton Web JSON) et l'envoie au client.
Inclure le jeton dans la demande: Sur le client (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,
})); Ce qui précède utilise le contexte React pour gérer l'état d'authentification. La fonction login met à jour l'état à l'aide du jeton reçu.
utiliser des jetons dans la demande: Avec le jeton, incluez-le dans l'en-tête de la demande:
// 示例：在客户端的 Cookie 中存储 Session ID document.cookie = "sessionID=abc123; path=/";
Lors de la demande avec Axios, le jeton est automatiquement ajouté à l'en-tête.
Les deux méthodes nous aident à gérer efficacement notre session, offrant une expérience sûre et transparente.
Les séances de gestion et les cookies dans les applications React sont essentielles pour créer des applications Web sécurisées, conviviales et hautes performances.
Pour vous assurer que notre application React fonctionne correctement, veuillez effectuer ce qui suit.
HttpOnly et secure Cookies de protection du logo incluez toujours les logos HttpOnly et secure le cas échéant.
HttpOnly. Ce drapeau empêche les attaques contre les cookies via JavaScript ou tout autre code malveillant, réduisant le risque d'attaques de scripts croisés (XSS). Il garantit que les cookies sont accessibles uniquement par le serveur: <code>名称：_ga 值：GA1.3.210706468.1583989741 域：.example.com 路径：/ 过期/最大年龄：2022-03-12T05:12:53.000Z</code>
secure. Ce drapeau garantit que les cookies sont envoyés uniquement sur des connexions cryptées sécurisées (HTTPS). Il peut atténuer le risque d'interception malveillante des utilisateurs: // 示例：设置会话 Cookie document.cookie = "sessionID=abc123; path=/";
Pour une sécurité améliorée, implémenter l'expiration de la session et les propriétés de rafraîchissement des jetons. Rafraîchir régulièrement le jeton ou la définition du temps d'expiration de la session peut aider à atténuer le risque d'accès non autorisé.
// 示例：设置具有过期日期的持久性 Cookie document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
/login Le point de terminaison renvoie le jeton JWT initial après une authentification réussie. /refresh-token Le point de terminaison utilise le jeton de rafraîchissement pour générer un nouveau jeton d'accès.
Évitez de stocker des informations sensibles directement dans les cookies ou les sessions. Pour conserver des données sensibles dans des circonstances inévitables, cryptez-la avant de les stocker. Le chiffrement ajoute une couche de sécurité supplémentaire, ce qui rend plus difficile d'accéder aux informations sensibles même si les utilisateurs malveillants interceptent les données:
document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";
SameSite Propriétés SameSite aide à prévenir les attaques de contrefaçon de demande de site transversal (CSRF) en spécifiant lorsque les cookies sont envoyés avec des demandes de site transversal.
Strict. Les cookies ne sont envoyés que dans un contexte de premier parti, empêchant les sites Web tiers de faire des demandes au nom des utilisateurs. // 示例：在 Cookie 中存储用户偏好设置 document.cookie = "theme=dark; path=/";
Lax. Permettez-nous d'envoyer des cookies en utilisant une navigation de niveau supérieur (comme lors du clic sur un lien), mais pas des demandes de publication inter-sites initiées par des sites Web tiers: // 使用 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,
}));Évitez de stocker l'intégralité de l'état d'application dans un cookie ou une session. Séparer les données d'authentification des autres états liés à l'application pour maintenir la clarté et minimiser le risque d'exposition à des informations sensibles:
// 示例：在客户端的 Cookie 中存储 Session ID document.cookie = "sessionID=abc123; path=/";
Envisagez d'utiliser une bibliothèque tierce mature pour la gestion des cookies. La bibliothèque comme JS-Cookie fournit une API simple et pratique qui résume la complexité de l'API native document.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);Gardez les bibliothèques et les cadres tiers à jour pour bénéficier des correctifs de sécurité et des améliorations. Les mises à jour régulières des dépendances garantissent que nos applications ne sont pas sensibles aux vulnérabilités connues.
Discutez régulièrement de votre application pour les audits de sécurité et les tests. Cela comprend le test des vulnérabilités communes telles que XSS et CSRF. Envisagez d'utiliser des outils de sécurité et des pratiques telles que la politique de sécurité du contenu (CSP) pour réduire les risques de sécurité.
Les cookies et la session sont des outils utiles pour créer des applications de réaction sûres et efficaces. Ils sont utilisés pour gérer l'authentification des utilisateurs, préserver les préférences des utilisateurs ou activer les interactions avec état.
En suivant les meilleures pratiques et en utilisant des bibliothèques éprouvées, nous pouvons créer des applications robustes et fiables qui offrent une expérience utilisateur transparente tout en priorisant la sécurité.
Si vous aimez cet article, veuillez consulter d'autres ressources passionnantes de SitePoint:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quels sont les 8 types de données de Redis
Tutoriel C#
Quel protocole est UDP ?
Comment utiliser l'instruction insert dans MySQL
Quels sont les systèmes de correction d'erreurs de noms de domaine ?
saut de ligne forcé de mot
utilisation de la fonction setproperty
Le rôle de l'attribut padding en CSS
Logiciel de système de gestion ERP gratuit
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
