Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp

Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp

Wenn das Front-End die Schnittstelle anfordert, wird sie mit dem Back-End definiert. Wenn der Statuscode 401 lautet, bedeutet dies, dass das Token abgelaufen ist und das Front-End ein neues Token anfordern muss.

Der allgemeine Ablauf ist wie folgt:

1. Nachdem sich der Benutzer angemeldet hat, gibt das Backend zwei Token zurück, accessToken und refreshToken, die im Storage gespeichert sind

Beim Anfordern von Daten verwendet der Anforderungsheader accessToken, um die Schnittstelle zu senden

2. Wenn das Token abläuft, erhalten wir über die Schnittstelle ein neues Token vom Backend und der Anforderungsparameter lautet refreshToken

3. Nachdem wir den neuen accessToken und refreshToken erhalten haben, ersetzen wir den im vorherigen Storage gespeicherten Token

4. Gleichzeitig müssen wir den neuen accessToken verwenden, um die Schnittstelle, die 401 gemeldet hat, erneut anzufordern, die Daten abzurufen und eine problemlose Token-Aktualisierung zu erreichen

5. Wenn das vom Backend zurückgegebene neue Token nicht verwendet werden kann, bedeutet dies, dass Sie sich erneut anmelden und zur Anmeldeseite springen müssen (dieser Schritt kann flexibel verwendet werden. Ich persönlich verwende ein Routing-Plugin: https://ext.dcloud.net.cn/plugin?id=578)

Mit dem Uni-App-Plugin nutzen und umsetzen:

Gehen Sie zum Uni-App-Plugin-Markt, um die gepackte Netzwerkanforderung herunterzuladen und sie gemäß dem Dokument für Ihr eigenes Projekt zu konfigurieren.

Adresse: https://ext.dcloud.net.cn/plugin?id=159

Ändern Sie nach der Konfiguration die Datei index.js im Ordner vmeitime-http

Ändern Sie dann die Datei interface.js im Ordner vmeitime-http, um den 401-Status anzuzeigen

Wenn Sie nach dem Lesen immer noch nichts verstehen, sehen Sie sich bitte meinen Quellcode an. Bitte beachten Sie, dass ich zwei Plugins verwendet habe. Bitte verstehen und verarbeiten Sie sie sorgfältig und denken Sie bei Ihren eigenen Projekten darüber nach ...

importiere http von './interface'
Konfiguration aus „./config“ importieren

// Anfrage.js
Vue von „vue“ importieren
Router von '@/router' importieren

//...anderer Logikcode export const execute = (name, data = {}) => {

    //Setzen Sie den Pre-Request-Interceptor http.interceptor.request = (config) => {
        let token = uni.getStorageSync('accessToken')
        config.header['x-access-token'] löschen
        wenn (Token) {
            config.header['x-access-token'] = Token
        }
    }
    //Setzen Sie den Interceptor, nachdem die Anfrage beendet ist http.interceptor.response = async (response) => {
        const statusCode = antwort.statusCode;
        wenn (Statuscode === 401) {
            Antwort = warte auf doRequest(Antwort)
        }
        wenn (Statuscode === 402) {
            uni.removeStorageSync('accessToken');
            uni.removeStorageSync('refreshToken');
            uni.removeStorageSync('realname');
            lass springen = uni.getStorageSync('springen')
            wenn (!springen) {
                setzeTimeout(() => {
                    uni.showModal({
                        Titel: 'Tipps',
                        Inhalt: „Ihr Konto ist von einem anderen Standort aus angemeldet!“,
                        showCancel: false,
                        Erfolg: Funktion (Res) {
                            wenn (res.bestätigen) {
                                Router.push({
                                    Name: 'Anmelden',
                                    Parameter: {
                                        'RouterName': 'Heimat'
                                    }
                                })
                            }
                        },
                    })
                });
                uni.setStorageSync('springen', 'wahr')
            }
        }
        wenn (statusCode == 403) {
            lass springen = uni.getStorageSync('springen')
            wenn (!springen) {
                setzeTimeout(() => {
                    Router.ersetzen({
                        Name: 'Anmelden',
                        Parameter: {
                            'RouterName': 'Heimat'
                        }
                    })
                },500)
                uni.setStorageSync('springen', 'wahr')
            }
        }
        // Einheitliche Verarbeitung von Fehleranfragen const code = response.data.code;
        const Nachricht = Antwort.Daten.Nachricht;
        wenn (response.statusCode == 200 && code !== 0 && code != -1 && code) {
            uni.showToast({
                Titel: Nachricht,
                Symbol: "keine",
                Dauer: 2000
            });
        }
        Antwort zurückgeben;
    }
    Rückgabewert http.request({
        Name: Name,
        Basis-URL: config.base,
        URL: config.interface[name].pfad,
        Methode: config.interface[name].method ? config.interface[name].method : 'GET',
        Datentyp: "json",
        Daten,
    })
}

Standard exportieren {
    ausführen
}
    // Token-Methode aktualisieren async function doRequest(response) {
        const res = warte auf Ausführung('refresh', {refreshToken: uni.getStorageSync('refreshToken')})
        Konstante {
            Code,
            Daten
        } = res.daten
        wenn (Code == 0) {
            uni.setStorageSync('Zugriffstoken', data.Zugriffstoken)
            uni.setStorageSync('refreshToken', data.refreshToken)
            let config = response.config
            config.header['x-access-token'] = Daten.accessToken
            const weiterverkauft = warte auf Ausführung(config.name,{ ...config.data
            })
            Rückgabe weiterverkauft
        } anders {
            uni.removeStorageSync('accessToken');
            uni.removeStorageSync('refreshToken');
            uni.showToast({
                Titel: ,,Login abgelaufen, bitte erneut anmelden! ',
                Symbol: "keine",
                Erfolg() {
                    Router.push({
                        Name: 'Anmelden',
                        Parameter: {
                            'RouterName': 'Heimat'
                        }
                    })
                }
            });
        }
    }

Oben finden Sie eine ausführliche Erläuterung der schmerzlosen UniApp-Token-Aktualisierungsmethode. Weitere Informationen zur schmerzlosen UniApp-Token-Aktualisierungsmethode finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp
  • Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue
  • Detaillierte Erklärung der globalen Variablenimplementierung von Uniapp
  • Detaillierte Erklärung der Stile in uni-app

<<:  Lösung für das Problem, dass VC6.0 bei Installation unter WIN10 nicht verwendet werden kann

>>:  Zusammenfassung der MySQL-Slow-Log-Praxis

Artikel empfehlen

Detaillierte Erläuterung von acht Methoden zum Korrigieren des CSS-Seitenendes

Beim Schreiben einer Seite kommt es häufig vor, d...

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

1. Fügen Sie dem HTML-Header das Viewport-Tag hin...

Linux Yum-Paketverwaltungsmethode

Einführung yum (Yellow dog Updater, Modified) ist...

CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche

Ich habe mir vor einiger Zeit Tik Tok angesehen u...

Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?

Inhaltsverzeichnis Überblick Definieren von Metho...

HTML ist etwas, das Webseiten-Ersteller lernen und beherrschen müssen.

Welche Vorteile bietet das Erlernen von HTML? 1: ...

Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können

Frage Lassen Sie mich zunächst über das Problem s...

Gojs implementiert Ameisenlinien-Animationseffekt

Inhaltsverzeichnis 1. Gojs-Implementierung 1. Zei...

Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Rendern Beispielcode Heute werden wir das WeChat-...

Detaillierte Untersuchung von vue2.x - Erklärung der h-Funktion

Inhaltsverzeichnis Lösung, Zusammenfassen: Vue-Pr...

So löschen Sie Junk-Dateien elegant in Linux

Ich frage mich, ob Sie wie ich ein Programmierer ...

Vue implementiert Buchverwaltungsfall

In diesem Artikelbeispiel wird der spezifische Co...