Vue verwendet ein Token, um nach Ablauf zur Anmeldeseite zu springen

Der Routing-Hook in Vue2.0 wird hauptsächlich dazu verwendet, die Navigation abzufangen und sie den Sprung abschließen oder abbrechen zu lassen, bevor sie als Routenwächter verstanden werden kann. Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel dafür, wie Vue das Routing-Hook-Token verwendet, um nach Ablauf des Tokens zur Anmeldeseite zu springen. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

ist in globale Navigations-Hooks, Hooks exklusiv für einzelne Routen und Intrakomponenten-Hooks unterteilt.

Die drei Arten von Hooks werden nur an unterschiedlichen Stellen verwendet. Sie akzeptieren alle eine Funktion als Parameter. Die Funktion übergibt drei Parameter, nämlich to, from und next.

Next hat drei Methoden

(1)next(); //Standardroute

(2)next(false); //Routensprung verhindern

(3)next({path:'/'}); //Blockieren Sie die Standardroute und springen Sie zum angegebenen Pfad

Hier habe ich einen In-Component-Hook verwendet, um zu bestimmen, wann das Token abläuft und zu springen Zur Login-Seite können die beiden anderen Hooks auf der offiziellen Website eingesehen werden.

//路由前验证
  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();
    }
   })
  }

Die Implementierungsmethode ist sehr einfach. Senden Sie vor dem Routing eine Anfrage an den Server. Wenn die zurückgegebenen Daten darauf hinweisen, dass das Token abgelaufen ist, wird der Standardsprung verhindert normalerweise.

Verwandte Empfehlungen:

Vue-Ressourcen-Interceptor bestimmt die Token-Ungültigmachung und springt

Verifizierungstoken für öffentliche PHP-WeChat-Konten, Antwortinhalt, Methode des Pushens von Nachrichten

Detailliertes Beispiel für jQuery Ajax, das Token zur Überprüfung der Identität verwendet

Das obige ist der detaillierte Inhalt vonVue verwendet ein Token, um nach Ablauf zur Anmeldeseite zu springen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!