📝 docs: Add token authentication guide

CHANGELOG.md

@@ -8,7 +8,7 @@
 ### Vue Dash
 
 - ✨ **Nouvelles fonctionnalités**
-  - **prompts:** Ajout de l'option Jenkins files ([#1315](https://github.com/assurance-maladie-digital/design-system/pull/1315))
+  - **prompts:** Ajout de l'option Jenkins files ([#1315](https://github.com/assurance-maladie-digital/design-system/pull/1315)) ([de25e11](https://github.com/assurance-maladie-digital/design-system/commit/de25e118bb672007470a3e083f7a372e8153c42c))
 
 ### Documentation
 
@@ -18,9 +18,10 @@
 - 📝 **Documentation**
   - **roadmap:** Mise à jour de la page ([#1327](https://github.com/assurance-maladie-digital/design-system/pull/1327)) ([853e06b](https://github.com/assurance-maladie-digital/design-system/commit/853e06be8327bee5362681e67911aa0c35a8d76e))
   - **guides** Ajout du guide sur la gestion des variables d'environnement ([#1290](https://github.com/assurance-maladie-digital/design-system/pull/1290)) ([1d7def8](https://github.com/assurance-maladie-digital/design-system/commit/1d7def8c9a54db3c03faa82a9d85fc6d27e7a951))
-  - **guides:** Ajout du guide sur les v-model personnalisés ([#1297](https://github.com/assurance-maladie-digital/design-system/pull/1297)) ([7d53155](https://github.com/assurance-maladie-digital/design-system/commit/7d5315561d525649d46e6d8855d59a8b9573424c))
+  - **guides:** Ajout du guide sur les `v-model` personnalisés ([#1297](https://github.com/assurance-maladie-digital/design-system/pull/1297)) ([7d53155](https://github.com/assurance-maladie-digital/design-system/commit/7d5315561d525649d46e6d8855d59a8b9573424c))
   - **guides:** Ajout du guide sur la gestion des événements ([#1302](https://github.com/assurance-maladie-digital/design-system/pull/1302)) ([ad28235](https://github.com/assurance-maladie-digital/design-system/commit/ad2823551a9163c1162968352068a85521424ba7))
   - **FranceConnectBtn:** Documentation du composant ([#1329](https://github.com/assurance-maladie-digital/design-system/pull/1329)) ([5766901](https://github.com/assurance-maladie-digital/design-system/commit/576690153394e1920f61a2f29ba8aa204059bbb9))
+  - **guides:** Ajout du guide sur l'authentification avec token ([#1305](https://github.com/assurance-maladie-digital/design-system/pull/1305))
 
 ### Interne
 

packages/docs/src/content/guides/authentification-token.md

@@ -0,0 +1,115 @@
+---
+title: Authentification avec token
+description: Récupération, stockage et utilisation d’un token d’authentification pour les requêtes API.
+---
+
+## Récupération du token
+
+Lorsque le token est passé à l’application via une URL de cette forme :
+
+```bash
+https://example.com#access_token=monToken
+```
+
+<doc-alert type="info">
+
+L’URL est écrite comme pour des paramètres GET, mais le caractère `?`, indiquant le début des paramètres, est remplacé par le caractère `#`, indiquant une ancre.<br>
+Le navigateur ne transmettra pas le contenu de l’ancre au serveur, ce qui permettra de ne pas logger le contenu du token pour éviter un risque en terme de sécurité.
+
+</doc-alert>
+
+Vous pouvez créer une fonction `authenticate` dans le fichier `src/router/authentication.ts` pour récupérer le token en utilisant `URLSearchParams` et le stocker dans le store :
+
+```ts
+import { Route } from 'vue-router';
+import { Next } from '@cnamts/vue-dot/src/types';
+import { store } from '@/store';
+
+const TOKEN_KEY = 'access_token';
+
+export async function authenticate(to: Route, from: Route, next: Next): Promise<void> {
+	// Avoid infinite loop if route is home
+	if (to.hash.includes(`#${TOKEN_KEY}`) && to.name !== 'home') {
+		const urlParams = new URLSearchParams(to.hash.slice(1));
+		const token = urlParams.get(TOKEN_KEY);
+
+		store.dispatch('authentication/updateToken', token);
+
+		next({
+			name: 'home'
+		});
+	} else {
+		next();
+	}
+}
+```
+
+<doc-alert type="info">
+
+Vous devez définir le module `authentication` du store, pour cela vous pouvez consulter le guide sur l’[utilisation du store](/guides/store).
+
+</doc-alert>
+
+Cette fonction prend en paramètre les propriétés `to` et `from` de [Vue Router](https://router.vuejs.org/fr/guide/advanced/navigation-guards.html) ainsi que la fonction `next`, qui permet de naviguer vers la prochaine route.
+
+Elle sera appelée depuis le fichier `src/router/navigationRedirectGuard.ts` lorsque l’on voudra connecter l’utilisateur :
+
+```ts
+import { Route } from 'vue-router';
+import { Next } from '@cnamts/vue-dot/src/types';
+import { authenticate } from './authentication';
+
+import { MAINTENANCE_ENABLED } from '@/constants';
+
+export function navigationRedirectGuard(to: Route, from: Route, next: Next): void {
+	if (MAINTENANCE_ENABLED) {
+		// Avoid infinite loop if route name is maintenance
+		if ('maintenance' !== to.name) {
+			next({ name: 'maintenance' });
+		} else {
+			next();
+		}
+	} else if ('maintenance' === to.name) {
+		// Else, if we're trying to access the maintenance page
+		// when not in maintenance mode, redirect to home
+		next({ name: 'home' });
+	} else {
+		authenticate(to, from, next);
+	}
+}
+```
+
+## Utilisation dans le header d’une requête axios
+
+Pour utiliser le token lors d’appels API, on peut ajouter le header `Authorization` sur l’instance axios, ce qui ajoutera le header sur tous les appels effectués avec cette instance, avec comme valeur le token d’authentification. Vous pouvez modifier la fonction `authenticate` :
+
+```ts
+// …
+import { axios } from '@/plugins/axios';
+
+const TOKEN_KEY = 'access_token';
+const AUTHORIZATION_HEADER = 'Authorization';
+
+export async function authenticate(to: Route, from: Route, next: Next): Promise<void> {
+	// Avoid infinite loop if route is home
+	if (to.hash.includes(`#${TOKEN_KEY}`) && to.name !== 'home') {
+		// …
+
+		store.dispatch('authentication/updateToken', token);
+
+		axios.defaults.headers.common[AUTHORIZATION_HEADER] = `Bearer ${token}`;
+
+		next({
+			name: 'home'
+		});
+	} else {
+		next();
+	}
+}
+```
+
+<doc-alert type="info">
+
+La valeur du token est précédé du texte `Bearer` pour indiquer le [type de token utilisé](https://developer.mozilla.org/fr/docs/Web/HTTP/Authentication#sch%C3%A9ma_d'authentification).
+
+</doc-alert>

packages/docs/src/content/guides/gestion-evenements.md

@@ -7,7 +7,7 @@ description: Création et utilisation des événements entre des composants pare
 
 Il est parfois nécessaire qu’un composant enfant remonte des données au composant parent. Pour cela, on utilise les événements.
 
-Pou émettre un événement, vous pouvez utiliser la fonction `this.$emit` depuis le composant enfant :
+Pour émettre un événement, vous pouvez utiliser la fonction `this.$emit` depuis le composant enfant :
 
 ```ts
 this.$emit('change', 'value');
@@ -35,13 +35,11 @@ Par exemple, vous pouvez définir un composant enfant qui contient un champ de s
 
 ```vue
 <template>
-	<div>
-		<VTextField
-			v-model="value"
-			label="Nom"
-			class="vd-form-input"
-		/>
-	</div>
+	<VTextField
+		v-model="value"
+		label="Nom"
+		class="vd-form-input"
+	/>
 </template>
 
 <script lang="ts">
@@ -59,14 +57,12 @@ Ensuite, vous pouvez ajouter la fonction `emitChangeEvent` qui va émettre l’
 
 ```vue
 <template>
-	<div>
-		<VTextField
-			v-model="value"
-			label="Nom"
-			class="vd-form-input"
-			@change="emitChangeEvent"
-		/>
-	</div>
+	<VTextField
+		v-model="value"
+		label="Nom"
+		class="vd-form-input"
+		@change="emitChangeEvent"
+	/>
 </template>
 
 <script lang="ts">

packages/docs/src/data/drawerItems.ts

@@ -182,6 +182,10 @@ export const drawerItems: DrawerItem[] = [
 			{
 				title: 'v-model personnalisé',
 				to: '/guides/v-model'
+			},
+			{
+				title: 'Authentification avec token',
+				to: '/guides/authentification-token'
 			}
 		]
 	}