Vue utilise un jeton pour accéder à la page de connexion après son expiration

Le crochet de routage dans Vue2.0 est principalement utilisé pour intercepter la navigation et la laisser terminer le saut ou l'annuler avant de pouvoir être comprise comme un garde-route. Cet article vous présente principalement un exemple de Vue utilisant le jeton de hook de routage pour accéder à la page de connexion après l'expiration du jeton. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

est divisé en crochets de navigation globaux, crochets exclusifs aux itinéraires individuels et crochets intra-composants.

Les trois types de hooks sont simplement utilisés à des endroits différents. Ils acceptent tous une fonction comme paramètre. La fonction passe trois paramètres, à savoir to, from et next.

Next a trois méthodes

(1)next(); //Route par défaut

(2)next(false); //Empêcher le saut d'itinéraire

(3)next({path:'/'}); //Bloquer la route par défaut et accéder au chemin spécifié

Ici, j'ai utilisé un hook intégré au composant pour déterminer quand le jeton expire et sauter à la page de connexion, les deux autres hooks peuvent être consultés sur le site officiel.

//路由前验证
  beforeRouteEnter(to, from, next) {
   let postdata = {
    meta: {
     client_version: "1.0",
     client_type: "1",
    },
    data: {
     access_token: $.cookie("authtoken").toString()
    }
   }

   $.ajax({
    url: urls.serchuser,
    type: 'POST',
    data: JSON.stringify(postdata)
   }).done(data => {
    data = JSON.parse(data);
    console.log(data);
    if(data.status == 10050) {
     next(false);
     location.href = 'login.html';
    }else{
     next();
    }
   })
  }

La méthode de mise en œuvre est très simple. Envoyez une requête au serveur avant le routage. Si les données renvoyées indiquent que le jeton a expiré, le saut par défaut sera empêché, sinon il sautera. normalement.

Recommandations associées :

L'intercepteur de ressources Vue détermine l'invalidation et les sauts du jeton

Jeton de vérification du compte public PHP WeChat, contenu de la réponse, méthode de pousser des messages

Exemple détaillé de jQuery Ajax utilisant Token pour vérifier l'identité

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!