So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen

So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen

Fazit zuerst

Geschäftsprozess: Wenn laut Netzwerkprotokoll festgestellt wird, dass das Token abgelaufen ist, wird die Seite auf die Anmeldeseite umgeleitet und der Benutzer muss sich erneut anmelden.

Codelogik: Verwenden Sie benutzerdefiniertes HttpUtil, um die wx.request-API zu kapseln, abgelaufene Token global zu erfassen, sie automatisch zu verarbeiten und sie dann an Unternehmen der höheren Ebene zu senden.

Frage

Phänomen des Token-Verfalls:

Bei Netzwerkanforderungen läuft das Client-Token nach einer gewissen Zeit ab, wodurch nachfolgende Netzwerkanforderungen fehlschlagen und ein Ausnahmeprotokoll wie folgt ausgelöst wird:

Daten: {Code: "99997", Datum: 1634174831325, Nachricht: "TOKEN ABGELAUFEN", Status: "FEHLER"}

Die vom Miniprogramm wx.request bereitgestellte API ist sehr einfach. Entwickler können das Ablaufdatum des Tokens in der Rückruffunktion erst überprüfen, nachdem die Anforderungsantwort erfolgreich war. Der herkömmliche Ansatz ist:

1. Definieren Sie die Methode zur Überprüfung des Tokenablaufs:

Funktion checkAuth(resp) {
  if(resp.data.code == '99997') { //Der von unserem Server zurückgegebene Token-Ablaufcode lautet 99997. Der Code kann über das Backend angepasst werden.
    wx.navigateTo({
      url: '/pages/login/login', // Hier zur Anmeldeseite springen und den Benutzer auffordern, sich erneut anzumelden})
    console.log("Muss mich erneut anmelden...");
  }
}

2. Rufen Sie in der Antwort jeder Anforderungsschnittstelle checkAuth(res) auf, um das Ablaufen des Tokens zu erfassen.

Problemcode

Funktion createMatchImage(Daten, Spaß) {
  //Konsole.log(getApp())
  Konsole.log("Token = " + getApp().getToken())
  wx.Anfrage({
    Methode: 'POST',
    URL: conf.baseUrl + 'match/matchImages', 
    Daten: Daten,
    Kopfzeile: {
      'Inhaltstyp': 'Anwendung/JSON',
      'Sitzungsschlüssel': getApp().getToken()
    },
    Erfolg: Funktion (res) {
      Konsole.log(res)
      conf.checkAuth(res) // Überprüfen Sie, ob das Token abgelaufen ist. Wenn es abgelaufen ist, springen Sie zur Anmeldeseite.
      Spaß(res);
    }
  });
}
 
Funktion getMatchImages(id, Spaß) {
  wx.Anfrage({
   ...
    Erfolg: Funktion (res) {
      conf.checkAuth(res)
   ...
    }
  });
}
 
Funktion Bildlöschen(id, fun) {
...
  wx.Anfrage({
    ...
    Erfolg: Funktion (res) {
      conf.checkAuth(res)
      Spaß(res);
      //res zurückgeben;
    }
  });
}

Im obigen Code enthält jede Schnittstelle wiederholten Code, beispielsweise zur Konfiguration von BaseUrl, Token und checkAuth(). Hier können wir also noch mehr doppelten Code entfernen.

Lösung

Vereinheitlichen Sie den Einstiegspunkt für Netzwerkanforderungen und definieren Sie die Klasse HttpUtil. Kapselt die Methode wx.request.

const get = (URL, Erfolg, Fehler) => {
    var _token = getApp().getToken()
    wx.Anfrage({
      Methode:'GET',
      URL: Basis-URL + URL,
      Kopfzeile: {
        'Autorisierung': _token,
        'Inhaltstyp': 'Anwendung/JSON',
      },
      Erfolg:Funktion(res) {
        checkAuth(res) //Blockieren Sie hier den Ablauf des Tokens und springen Sie zur Anmeldeoberfläche console.log(res)
        Erfolg(e)
      },
      Fehler:Funktion(res){
        console.log("Anforderung fehlgeschlagen")
        Fehler(res)
      }
    })
}
···
 
modul.exporte = {
    bekommen: bekommen,
    Beitrag: Beitrag
}

HttpUtil-Verwendungsszenarien:

const httpUtil = require("../common/http/HttpUtil")
 
//Die Logikschicht initiiert eine Netzwerkanforderung, nur die URL und die Erfolgsrückruffunktion müssen übergeben werden. Das ist viel sauberer als zuvor.
Funktion getActivities(Erfolg) {
    httpUtil.get('meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100', Funktion(en) {
        Erfolg(e)
    })
}
 
modul.exporte = {
    Aktivitäten abrufen: Aktivitäten abrufen
}

Wie oben gezeigt, ist der Prozess der Handhabung des Token-Ablaufs bei Verwendung von httpUtil transparent und die Details sind intern gekapselt. Gleichzeitig speichert die Geschäftsseite auch den Boilerplate-Code wie das Festlegen von Token, die Verarbeitung des Token-Ablaufs, BaseUrl usw.

Verwenden Sie Promise, um Rückruffunktionen zu kapseln

Wir können Promise verwenden, um die Übergabe einer Rückruffunktion beim Aufrufen der Anforderungsschnittstelle zu vermeiden.

const get = (Parameter) => {
    var _token = getApp().getToken()
    returniere neues Promise((lösen, ablehnen) => {
      wx.Anfrage({
        Methode:'GET',
        URL: concatUrl(Parameter),
        Kopfzeile: {
          'Autorisierung': _token,
          'Inhaltstyp': 'Anwendung/JSON',
        },
        Erfolg: (res) => {
          checkAuth(res) //Blockieren Sie hier den Ablauf des Tokens und springen Sie zur Anmeldeoberfläche resolve(res)
        },
        Fehler: (Fehler) => {
          console.log("Anforderung fehlgeschlagen")
          ablehnen (Fehler)
        }
      })
    })
}

Anwendung:

// Serviceschicht, Netzwerkschnittstellenfunktion getActivities() { definieren
    return HttpUtil.get({
        URL: „meetup/api/v1/activity/getActivityList?Seitennr.=1&Seitengröße=100“
    })
}
    /**
     * Laden Sie die Aktivitätsliste (laden Sie zuerst die Gruppe, um den Aktivitätsavatar zu erhalten)
     */
    fetchGroupAndActivities: Funktion(){
      wenn(diese.Daten.istLogin) {
        var das = dies
        getGroups() //Lade zuerst die Avatare der Gruppenliste.
        .dann((res)=>{
          wenn(res.data.code == "10000") { 
            ...
            return getActivities() //Zweitens, lade die Aktivitätsliste}
        })
        .then((res)=>{ //Kettenaufruf, Aktivitätslistendaten verarbeiten.
          wenn (res.data.code == "10000") {
          ...
          }
        })
        .catch((err) => { //Ausnahmen gleichmäßig abfangen. Wenn irgendein Callback im obigen then eine Ausnahme sendet, wird die Aufrufkette direkt unterbrochen und hier verarbeitet.
          console.log("Abrufen von Act und Gruppieren ist fehlgeschlagen...")
        })
    }},

Zusammenfassen

Im Kapselungsprozess von wx.requestAPI wird das Promise-Objekt innerhalb von HttpUtil verwendet, um baseUrl, Token-Verarbeitung usw. zu kapseln, die Implementierungsdetails zu verbergen, eine einheitliche Schnittstelle zur Außenwelt bereitzustellen und Kettenaufrufe zu unterstützen. Dies ist ein gängiges Fassaden-Designmuster. Der Nachteil besteht darin, dass es das Open-Closed-Prinzip verletzt. Wenn eine neue Schnittstellenverarbeitung für Abfanganforderungen hinzugefügt wird, muss die ursprüngliche Schnittstellenimplementierung geändert werden. Später kann eine Zwischenschicht als Interceptor hinzugefügt werden, um neue Funktionen zu erweitern.

Dies ist das Ende dieses Artikels darüber, wie WeChat Mini-Programme mit Problemen beim Ablaufen von Token umgehen. Weitere Informationen zum Ablaufen von Mini-Programm-Token finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Informationen zum Problem der automatischen Aktualisierung des Crawler-Tokens des WeChat Mini-Programms
  • Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token
  • Anleitung zum Anmelden beim WeChat Mini-Programm und zum Austauschen von Token
  • Detaillierte Erklärung der WeChat-Applet-URL und Token-Einstellungen
  • Miniprogramm zur Implementierung der Token-Generierung und -Verifizierung

<<:  HTML-Maus-CSS-Steuerung

>>:  Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS

Artikel empfehlen

Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat

In meiner früheren Arbeit war der Entwicklungsser...

Mysql behält den vorhandenen Inhalt bei und fügt später Inhalte hinzu

Dieser Befehl ändert die Datentabelle ff_vod und ...

jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater

jQuery realisiert den Effekt der Sitzplatzauswahl...

Mehrere allgemeine Beispielcodes für Weiterleitungsverbindungen in HTML

Code kopieren Der Code lautet wie folgt: window.l...

Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?

Was sind :is und :where? :is() und :where() sind ...

JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen

1. Warum diesen Artikel schreiben? Sie haben sich...

Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)

Es gibt bereits viele Artikel über Slot-Scope auf...

Asynchrone JS ES6-Lösung

Inhaltsverzeichnis Erste Verwendung der Callback-...

Installations-Tutorial für VMware Workstation 12 Pro Linux

Dieser Artikel zeichnet das Linux-Tutorial zur In...

Detaillierte Erklärung der Verwendung von DECIMAL im MySQL-Datentyp

Detaillierte Erklärung der Verwendung von DECIMAL...

JS-Funktionsaufruf, Anwenden und Binden einer superdetaillierten Methode

Inhaltsverzeichnis JS-Funktionsaufruf, Apply- und...