Vérifier si Axios a un cookie de session

Question

J'implémente un garde de navigation pour mon application Vue.js, vérifiant si l'utilisateur est connecté. Je pense que le meilleur moyen serait de demander à Axios s'il a un cookie de session ou non. Quelque chose comme ça:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

Sauf, bien sûr, hasSessionCookie()n'existe pas, et je ne vois rien de tel dans la documentation. Y a-t-il un moyen, peut-être par extension?

Oui, je sais que je pourrais stocker l'état de connexion dans la boutique VueX. Je ne pense pas que ce soit une bonne idée car l'état se réinitialiserait si l'utilisateur, dans son infinie sagesse, rafraîchissait la page et réinitialisait ainsi l'application. Une autre solution que j'ai à l'esprit est un point de terminaison backend où l'application peut "demander" si elle est connectée. Mais c'est aussi assez boiteux.

Answer 1

Merci pour tous les conseils. La bonne solution était la suivante:

• VueX stocke le statut de connexion (simplement un drapeau booléen) que le garde de navigation vérifie
• Lorsque l'utilisateur se connecte ou se déconnecte, je règle le drapeau
• Lorsque l'application est lancée, j'appelle la /checkloginroute sur le serveur avant la création de l'instance Vue. Cela renvoie simplement un code d'état 200 ou 401 selon que l'utilisateur a une session valide ou non. Ensuite, j'ai défini le drapeau VueX en conséquence. De cette façon, l'utilisateur peut actualiser le navigateur mais VueX saura toujours s'il est connecté ou non.
• De plus, j'ai ajouté un intercepteur Axios pour détecter les erreurs 401. S'il y en a un, cela signifie que la session a expiré. Il définit ensuite l'indicateur VueX sur falseet redirige l'utilisateur vers la page de connexion.

J'ai écrit un article sur mon blog Medium avec des détails et des extraits si cela intéresse quelqu'un. https://medium.com/developer-rants/session-management-between-express-and-axios

Answer 2

Comme il s'agit d'un cookie côté serveur, vous ne pouvez pas le vérifier sur javascript côté client, vous devez faire une requête HTTP à votre serveur express pour vérifier si la session existe. Créez un itinéraire simple sur votre serveur express comme ceci:

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

Vérifiez ensuite votre garde de navigation vue:

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}

Answer 3

Vous allez dans la bonne direction, mais axios est un client HTTP et cela n'a rien à voir avec les cookies ni avec les cookies ou le stockage .. vous devez donc utiliser un package comme vue-cookies pour définir et obtenir des cookies.

Answer 4

Tamás Polgár, vous avez documenté exactement le même défi que j'ai eu avec Vue; que faire de la connexion si un événement inattendu du navigateur se produit et que la boutique est perdue.

Le magasin Vue:

Le magasin Vue est censé être un emplacement pratique pour un SPA pour stocker un tel drapeau (connecté ou non), cependant, le magasin est complètement effacé et rétabli avec chaque instance de Vue, ce qui signifie une nouvelle fenêtre / onglet de navigateur, actualisation ou tout autre événement inattendu qui déclenche une actualisation du navigateur.

Donc, votre approche décrit un appel back-end supplémentaire pour vérifier rapidement l'état, ce qui est une solution OMI légitime et viable.

Il existe également deux autres solutions potentielles, dont la seconde que j'ai implémentée dans mon propre SPA:

Deux autres solutions

1) Ne touchez pas du tout à votre code back-end. Utilisez vue-cookies pour que le navigateur client définisse un cookie une fois la connexion établie (ce serait complètement distinct du cookie http uniquement dont le serveur API principal a besoin).

Ce cookie doit toujours exister après une actualisation du navigateur. Cependant, je n'ai pas utilisé (ou essayé) cette approche, car je ne voulais pas me soucier de la modification de mon front-end pour vérifier un cookie local chaque fois que je veux vérifier l'état de connexion.

Le code frontal peut utiliser ce cookie pour déterminer si la personne est toujours connectée ou non.

2) Une autre approche distincte consiste à court-circuiter la vérification de l'API back-end normale pour l'authentification uniquement pour le contrôleur de cette route spécifique , mais pas pour toute autre route.

Voici comment fonctionnerait un `` court-circuit '' sur le back-end:

Dans le cas de la méthode de contrôleur de cette route spécifique, demandez-lui d'abord de vérifier l'existence de l'utilisateur dans la demande, puis de renvoyer un 200 mais avec un statut de «faux» ou une autre variable qui apparaît également dans la réponse de réussite.

C'est contre-intuitif, mais cela donne à l'appel Axios frontal quelque chose à saisir autre qu'une simple réponse d'erreur standard.

NOTE : J'appelle cela un "court-circuit" parce que si la méthode de contrôleur de la route de l'API back-end a beaucoup de code, faire de cette vérification la PREMIÈRE chose qu'elle fait évitera la partie coûteuse de l'appel.

Cette approche fonctionne parfaitement pour mes besoins et ne nécessite pas d'appel d'API nouveau ou secondaire.