Detaillierte Erklärung des Ungültigkeitsprozesses des VUE-Tokens

Ziel

Behandeln von Token-Ablaufszenarien

Token, als Schlüsseltokeninformationen des Benutzers, sind nicht lange gültig. Im Allgemeinen gibt es eine Ablaufzeit (die vom Backend bestimmt wird, nach welcher Zeit es abläuft). Wenn die Ablaufzeit überschritten wird, kann das aktuelle Token nicht mehr als Benutzeridentifikation zum Anfordern von Daten verwendet werden. Zu diesem Zeitpunkt müssen wir einige zusätzliche Ablaufverarbeitungen durchführen

Gedankenanalyse

Backend : Wenn Sie von einem Benutzer eine Anforderung zum Zugriff auf eine bestimmte Schnittstelle erhalten, prüfen Sie, ob das aktuelle Token ungültig ist. Wenn das Token ungültig ist, geben Sie einen vereinbarten Statuscode 10002 an das Frontend zurück.

Front-End : Analysieren Sie im Antwort-Interceptor den Rückgabewert der Schnittstelle. Wenn der Statuscode 10002 lautet, führen Sie einen Token-Ungültigkeitserklärungsvorgang durch.

Code-Landung

Fügen Sie in **src/utils/request.js** eine benutzerdefinierte Logik für die Fehlerbehandlung des Antwort-Interceptors hinzu.

Da Seitensprünge Routing erfordern, führen wir zunächst ein

//Routing importieren. Router von '@/router' importieren.

Code

// Im Antwort-Interceptor // 1. Bestimmen Sie anhand der vom Backend zurückgegebenen Daten, ob die Operation erfolgreich war, und melden Sie einen Fehler, wenn sie nicht erfolgreich ist. // 2. Geben Sie bei Erfolg nur gültige Daten zurück. service.interceptors.response.use(
  Antwort => {
    // Vereinbarung zwischen Backend und Frontend: success=true zeigt eine erfolgreiche Anfrage an, wenn (response.data.success) {
      Antwortdaten zurückgeben
    } anders {
      // Wenn Erfolg falsch ist, ist das Geschäft falsch und die Ablehnung wird direkt ausgelöst
      // Erfasst durch Catch Branch Return Promise.reject(new Error(response.data.message))
    }
  },
  asynchroner Fehler => {
    console.log('Anforderungsfehler', Fehler)
    wenn (Fehler.Antwort.Daten.Code === 10002) {
      console.log('Token abgelaufen')
      warte auf store.dispatch('Benutzer/Abmelden')
      // .vue -- dies.$route.fullPath
      // .js - router.currentRoute.vollständigerPfad

      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    console.dir(Fehler)
    returniere Promise.reject(Fehler)
  }
)

Die obige Lösung ist die Backend-geführte Lösung. Das Frontend muss nur den Fehlercode abrufen, um die Geschäftsverarbeitung durchzuführen. Diese Lösung ist auch die am häufigsten verwendete und sicherste Lösung.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!