|
| 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