Modèles d’authentification sécurisée
Stockage des jetons (mémoire, localStorage ou cookie httpOnly), actualisation silencieuse et déconnexion à la fermeture de l’onglet
Modèles d’authentification sécurisée est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Jetons et emplacement de stockage
Les SPA s’authentifient avec des jetons, mais l’endroit où vous les stockez détermine votre exposition aux attaques XSS et CSRF. L’approche moderne sépare un jeton d’accès à courte durée de vie d’un jeton de renouvellement à longue durée de vie, chacun étant stocké différemment.
Le problème de localStorage
Stocker des jetons dans localStorage est pratique, mais dangereux : tout script injecté par une attaque XSS peut les lire et exfiltrer le jeton. Évitez d’y placer vos identifiants.
// AVOID
localStorage.setItem("token", accessToken);Jeton d’accès en mémoire
Conservez le jeton d’accès dans une variable JavaScript ou une référence réactive. Il disparaît lors du rechargement : une attaque XSS réussie dispose donc d’une fenêtre d’exploitation bien plus réduite et rien n’est conservé sur le disque.
import { ref } from "vue";
export const accessToken = ref(null);Jeton de renouvellement dans un cookie httpOnly
Le jeton de renouvellement réside dans un cookie HttpOnly, Secure, SameSite. JavaScript ne peut pas le lire, donc XSS ne peut pas le voler, et le navigateur ne l’envoie qu’à votre point de terminaison d’authentification.
Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/authJoindre le jeton d’accès
Un intercepteur de requêtes Axios ajoute le jeton d’accès conservé en mémoire à l’en-tête d’autorisation de chaque appel.
api.interceptors.request.use((config) => {
if (accessToken.value) {
config.headers.Authorization = "Bearer " + accessToken.value;
}
return config;
});Détecter l’expiration : le 401
Lorsque le jeton d’accès expire, le serveur répond avec 401 Unauthorized. Un intercepteur de réponses intercepte cette réponse pour déclencher un renouvellement.
api.interceptors.response.use(
(res) => res,
async (error) => {
if (error.response?.status === 401) {
// attempt refresh
}
return Promise.reject(error);
}
);Renouveler le jeton
À la réception d’un 401, appelez le point de terminaison de renouvellement. Le navigateur envoie automatiquement le cookie de renouvellement httpOnly (withCredentials) et le serveur renvoie un nouveau jeton d’accès.
const { data } = await axios.post("/auth/refresh", null, {
withCredentials: true
});
accessToken.value = data.accessToken;Réexécution de la requête original
Après le rafraîchissement, rejouez la requête original qui a échoué avec le nouveau jeton afin que l’utilisateur ne s’en aperçoive jamais.
async (error) => {
const original = error.config;
if (error.response?.status === 401 && !original._retry) {
original._retry = true;
const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
accessToken.value = data.accessToken;
original.headers.Authorization = "Bearer " + data.accessToken;
return api(original);
}
return Promise.reject(error);
}Éviter les rafraîchissements en cascade
Si de nombreuses requêtes renvoient 401 simultanément, mettez-les en file d’attente derrière un seul rafraîchissement en cours afin de ne pas appeler plusieurs fois le point de terminaison de rafraîchissement.
let refreshing = null;
function refresh() {
if (!refreshing) {
refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
.finally(() => { refreshing = null; });
}
return refreshing;
}Se déconnecter
Lors de la déconnexion, supprimez le jeton conservé en mémoire et appelez un point de terminaison qui supprime le cookie de rafraîchissement côté serveur.
async function logout() {
accessToken.value = null;
await axios.post("/auth/logout", null, { withCredentials: true });
}Combiner avec la protection CSRF
Comme le cookie de rafraîchissement est envoyé automatiquement, protégez ce point de terminaison avec SameSite et des jetons CSRF, comme pour les autres routes authentifiées par cookie.
Vérification rapide
Où faut-il stocker respectivement le jeton d’accès et le jeton de rafraîchissement ?
Récapitulatif
Stockez le jeton d’accès dans une référence en mémoire (jamais dans localStorage) et le jeton de rafraîchissement dans un cookie HttpOnly. Un intercepteur de requête ajoute le jeton porteur ; un intercepteur de réponse intercepte 401, appelle le point de terminaison de rafraîchissement, met à jour le jeton et réessaie la requête original, tout en dédupliquant les rafraîchissements simultanés et en s’associant à des protections CSRF.
Questions Fréquemment Posées
La leçon « Modèles d’authentification sécurisée » est-elle gratuite ?
Oui — le texte complet de « Modèles d’authentification sécurisée » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modèles d’authentification sécurisée » ?
Stockage des jetons (mémoire, localStorage ou cookie httpOnly), actualisation silencieuse et déconnexion à la fermeture de l’onglet Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Modèles d’authentification sécurisée » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Prévention des XSS dans Vue
- Content Security Policy (CSP) avec Vue
- Protection contre les CSRF dans les SPA Vue
- Modèles d’authentification sécurisée