Skip to content

Commit 771e913

Browse files
i18n(fr): create guides/sessions.mdx
See withastro#11444 and withastro#11460
1 parent 7e0b25e commit 771e913

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed
Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: Sessions
3+
description: Partagez des données entre les requêtes de pages rendues à la demande.
4+
i18nReady: true
5+
---
6+
7+
import Since from '~/components/Since.astro';
8+
import ReadMore from '~/components/ReadMore.astro';
9+
10+
<p>
11+
<Since v="5.7.0" />
12+
</p>
13+
14+
Les sessions sont utilisées pour partager des données entre les requêtes de [pages rendues à la demande](/fr/guides/on-demand-rendering/).
15+
16+
Contrairement aux [`cookies`](/fr/guides/on-demand-rendering/#cookies), les sessions sont stockées sur le serveur, ce qui vous permet de stocker de grandes quantités de données sans vous soucier des limites de taille ni des problèmes de sécurité. Elles sont utiles pour stocker des éléments tels que les données utilisateur, les paniers d'achat et l'état des formulaires, et fonctionnent sans JavaScript côté client :
17+
18+
```astro title="src/components/CartButton.astro" {3}
19+
---
20+
export const prerender = false; // Pas nécessaire avec la sortie `server`
21+
const cart = await Astro.session?.get('cart');
22+
---
23+
24+
<a href="/checkout">🛒 {cart?.length ?? 0} articles</a>
25+
```
26+
27+
## Configuration des sessions
28+
29+
Les sessions nécessitent un pilote de stockage pour stocker les données de session. Les adaptateurs [Node](/fr/guides/integrations-guide/node/#sessions), [Cloudflare](/fr/guides/integrations-guide/cloudflare/#sessions) et [Netlify](/en/guides/integrations-guide/netlify/#sessions) configurent automatiquement un pilote par défaut pour vous, mais d'autres adaptateurs nécessitent actuellement que vous [spécifiiez un pilote manuellement](/fr/reference/configuration-reference/#sessiondriver).
30+
31+
```js title="astro.config.mjs" ins={4}
32+
{
33+
adapter: vercel(),
34+
session: {
35+
driver: "redis",
36+
},
37+
}
38+
```
39+
40+
<ReadMore>
41+
Consultez [l'option de configuration `session`](/fr/reference/configuration-reference/#options-des-sessions) pour plus de détails sur la configuration d'un pilote de stockage et d'autres options configurables.
42+
</ReadMore>
43+
44+
45+
## Interaction avec les données de session
46+
47+
L'[objet `session`](/fr/reference/api-reference/#session) vous permet d'interagir avec l'état utilisateur enregistré (par exemple, l'ajout d'articles au panier) et l'identifiant de session (par exemple, la suppression du cookie d'identifiant de session lors de la déconnexion). Cet objet est accessible avec `Astro.session` dans vos composants et pages Astro, et avec `context.session` dans les points de terminaison d'API, les middlewares et les actions.
48+
49+
La session est générée automatiquement lors de sa première utilisation et peut être régénérée à tout moment avec [`session.regenerate()`](/fr/reference/api-reference/#regenerate) ou détruite avec [`session.destroy()`](/fr/reference/api-reference/#destroy).
50+
51+
Pour de nombreux cas d'utilisation, vous aurez uniquement besoin d'utiliser [`session.get()`](/fr/reference/api-reference/#get) et [`session.set()`](/fr/reference/api-reference/#set).
52+
53+
<ReadMore>
54+
Consultez [la référence de l'API Sessions](/fr/reference/api-reference/#session) pour plus de détails.
55+
</ReadMore>
56+
57+
### Composants et pages Astro
58+
59+
Dans les composants et pages `.astro`, vous pouvez accéder à l'objet session via l'objet global `Astro`. Par exemple, pour afficher le nombre d'articles dans un panier :
60+
61+
```astro title="src/components/CartButton.astro" "Astro.session"
62+
---
63+
export const prerender = false; // Pas nécessaire avec la sortie `server`
64+
const cart = await Astro.session?.get('cart');
65+
---
66+
67+
<a href="/checkout">🛒 {cart?.length ?? 0} articles</a>
68+
```
69+
70+
### Points de terminaison d'API
71+
72+
Dans les points de terminaison d'API, l'objet session est disponible dans l'objet `context`. Par exemple, pour ajouter un article à un panier :
73+
74+
```ts title="src/pages/api/addToCart.ts" "context.session"
75+
export async function POST(context: APIContext) {
76+
const cart = await context.session?.get('cart') || [];
77+
const data = await context.request.json<{ item: string }>();
78+
if(!data?.item) {
79+
return new Response('Un article est obligatoire', { status: 400 });
80+
}
81+
cart.push(data.item);
82+
await context.session?.set('cart', cart);
83+
return Response.json(cart);
84+
}
85+
```
86+
87+
### Actions
88+
89+
Dans les actions, l'objet session est disponible dans l'objet `context`. Par exemple, pour ajouter un article à un panier :
90+
91+
```ts title="src/actions/addToCart.ts" "context.session"
92+
import { defineAction } from 'astro:actions';
93+
import { z } from 'astro:schema';
94+
95+
export const server = {
96+
addToCart: defineAction({
97+
input: z.object({ productId: z.string() }),
98+
handler: async (input, context) => {
99+
const cart = await context.session?.get('cart');
100+
cart.push(input.productId);
101+
await context.session?.set('cart', cart);
102+
return cart;
103+
},
104+
}),
105+
};
106+
```
107+
108+
### Middleware
109+
110+
:::note
111+
Les sessions ne sont actuellement pas prises en charge dans les middlewares de périphérie.
112+
:::
113+
114+
Dans le middleware, l'objet session est disponible dans l'objet `context`. Par exemple, pour définir l'heure de la dernière visite de la session :
115+
116+
```ts title="src/middleware.ts" "context.session"
117+
import { defineMiddleware } from 'astro:middleware';
118+
119+
export const onRequest = defineMiddleware(async (context, next) => {
120+
context.session?.set('lastVisit', new Date());
121+
return next();
122+
});
123+
```
124+
125+
## Types des données de session
126+
127+
Par défaut, les données de session sont non typées et vous pouvez stocker des données arbitraires dans n'importe quelle clé. Les valeurs sont sérialisées et désérialisées avec [devalue](https://github.com/Rich-Harris/devalue), qui est la même bibliothèque utilisée dans les collections de contenu et les actions. Cela signifie que les types pris en charge sont les mêmes et incluent les chaînes de caractères, les nombres, `Date`, `Map`, `Set`, `URL`, les tableaux et les objets.
128+
129+
Vous pouvez éventuellement définir des types TypeScript pour vos données de session en créant un fichier `src/env.d.ts` et en ajoutant une déclaration pour le type `App.SessionData` :
130+
131+
```ts title="src/env.d.ts"
132+
declare namespace App {
133+
interface SessionData {
134+
user: {
135+
id: string;
136+
name: string;
137+
};
138+
cart: string[];
139+
}
140+
}
141+
```
142+
143+
Cela vous permettra d'accéder aux données de session avec la vérification des types et la saisie semi-automatique dans votre éditeur :
144+
145+
```ts title="src/components/CartButton.astro"
146+
---
147+
const cart = await Astro.session?.get('cart');
148+
// const cart: string[] | undefined
149+
150+
const something = await Astro.session?.get('something');
151+
// const something: any
152+
153+
Astro.session?.set('user', { id: 1, name: 'Houston' });
154+
// Error: Argument of type '{ id: number; name: string }' is not assignable to parameter of type '{ id: string; name: string; }'.
155+
---
156+
```
157+
158+
:::caution
159+
Ceci est uniquement utilisé pour la vérification des types et n'affecte pas le comportement d'exécution de la session. Soyez particulièrement vigilant si vous modifiez le type alors que les utilisateurs ont stocké des données dans la session, car cela pourrait provoquer des erreurs d'exécution.
160+
:::

0 commit comments

Comments
 (0)