Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

Das Projekt wurde in diesen Tagen getestet und der Tester hat mir einen Fehler gemeldet. Er sagte, dass das Token abgelaufen sei und die Route automatisch zur Anmeldeseite springen sollte, um dem Benutzer eine erneute Anmeldung zu ermöglichen. Lassen Sie mich zunächst über einige Voraussetzungen sprechen.

1: Die Token-Gültigkeitsdauer unseres Unternehmens ist in der Produktionsumgebung auf eine Stunde festgelegt. Wenn das Token abläuft, kehren alle Schnittstellen direkt zurück.
2: Bei jedem Routensprung wird das Token beurteilt. Eine globale beforeEach-Hook-Funktion wird gesetzt. Wenn das Token vorhanden ist, wird zur gewünschten Seite gesprungen, andernfalls

Springen Sie direkt zur Anmeldeseite und lassen Sie den Benutzer sich anmelden, um das Token abzurufen

Von der Schnittstelle zurückgegebene Informationen

{
 Code: 10009,
 Nachricht: 'Token abgelaufen',
 Daten: null
}

Globale Routing-Hook-Funktion

router.beforeEach(async(zu, von, weiter) => {
//Token abrufen
  // Feststellen, ob der Benutzer sich angemeldet hat
  const hasToken = getToken()

  wenn (hatToken) {
  //Token vorhanden, wenn die aktuell umgeleitete Route die Login-Schnittstelle ist if (to.path === '/login') {
      // wenn angemeldet, Weiterleitung zur Startseite
      weiter({ Pfad: '/' })
      NProgress.done()
    } anders {
    //Hier entfernen wir die Berechtigungen des Benutzers, um festzustellen, ob der Benutzer die Berechtigung hat, auf diese Route zuzugreifen} catch (error) {
          // Token entfernen und zur Anmeldeseite gehen, um sich erneut anzumelden
          warte auf store.dispatch('user/resetToken')
          Message.error(Fehler || 'Hat einen Fehler')
          weiter(`/login?redirect=${to.path}`)
          NProgress.done()
        }
  } anders {
    //Token existiert nicht, wenn (whiteList.indexOf(to.path) !== -1) {
    //Wenn die umzuleitende Route auf der Whitelist steht, springe zu next()
    } anders {
    //Ansonsten zur Anmeldeseite springen next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

Daher fange ich alle Anfragen direkt ab. Wenn die Antwortdaten den Code 10009 zurückgeben, lösche ich direkt die Benutzerinformationen und lade die Seite neu. Ich habe den Code vereinfacht, da beim Anmelden des Benutzers die Token-, Namens- und Berechtigungsinformationen in der Datei store/user.js gespeichert werden. Sobald das Token abläuft, werden die Informationen in der Benutzerdatei gelöscht. Auf diese Weise wird nach Ablauf des Tokens, wenn die Seite aktualisiert oder die Komponente übersprungen wird, das globale Urteil beforeEach aufgerufen. Wenn die Token-Informationen nicht vorhanden sind, wird direkt zur Anmeldeseite gesprungen.

Axios von „Axios“ importieren
importiere { MessageBox, Message } aus 'element-ui'
Store aus „@/store“ importieren
importiere { getToken } von '@/utils/auth'

const service = axios.create({
  Basis-URL: Prozess.Umgebung.VUE_APP_BASE_API, 
  Zeitüberschreitung: 5000 
})
// Tragen Sie das Token beim Senden der Anfrage service.interceptors.request.use(
  Konfiguration => {
    wenn (store.getters.token) {
      config.headers['sg-token'] = getToken()
    }
    Konfiguration zurückgeben
  },
  Fehler => {
    console.log(Fehler)
    returniere Promise.reject(Fehler)
  }
)

Dienst.Interceptors.Antwort.Verwendung(
  Antwort => {
    Konsole.log(Antwort.Daten)
    const res = antwort.daten

    // Token abgelaufen, zurück zur Anmeldeoberfläche if (res.code === 10009) {
      store.dispatch('Benutzer/Abmelden').then(() => {
        Standort.neu laden(true)
      })
    }
    Rückgabewert
  },
  Fehler => {
    console.log('err' + error) // zum Debuggen
    Nachricht({
      Nachricht: error.msg,
      Typ: "Fehler",
      Dauer: 5 * 1000
    })
    returniere Promise.reject(Fehler)
  }
)

Standarddienst exportieren

Nun, das ist alles zum Thema Token-Sharing. Ersetzen Sie den obigen Code entsprechend Ihrem Projekt durch Ihre Daten.

Dies ist das Ende dieses Artikels darüber, wie Sie mit Vue automatisch zur Anmeldeseite springen, wenn das Token abläuft. Weitere Informationen dazu, wie Sie automatisch zur Anmeldeseite springen, wenn das Token abläuft, finden Sie in früheren Artikeln auf 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:
  • So implementieren Sie die Vue-Klickschaltflächenroute zum Springen zur angegebenen Seite
  • vue springt zur Seite und öffnet ein neues Fenster, das Parameter überträgt und empfängt
  • Zusammenfassung der vier gängigen Methoden und Unterschiede der Vue-Sprungseite
  • So implementieren Sie Seitensprünge in einem Vue-Projekt
  • So verwenden Sie Vuex, um zur Seite zu springen
  • Lösung für das Vue-Routing: Diese Seite mit dem Sprung „this.route.push“ wird nicht aktualisiert
  • Wie realisiert Vue den Sprung zwischen den Seiten dieses Projekts?

<<:  URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben

>>:  Detaillierte Erklärung der HTML-Tabellen-Tags (für Anfänger geeignet)

Artikel empfehlen

Allgemeines Startskriptbeispiel für ein Linux-Java-Programm

Allerdings ist die Häufigkeit des Shell-Starts se...

Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex

Inhaltsverzeichnis 1. Was ist vuex 2. Installatio...

Detailliertes Tutorial zur Installation von Prometheus mit Docker

Inhaltsverzeichnis 1. Node Exporter installieren ...

WeChat-Applet-Canvas implementiert Signaturfunktion

Im WeChat-Applet-Projekt umfasst das Entwicklungs...

Verwendung der MySQL SHOW STATUS-Anweisung

Um die Leistung von MySQL anzupassen und den Dien...

Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Technik-Fan html-Webseite, müssen Sie wissen Von ...

Einführung in die Überwachung des MySQL MHA-Betriebsstatus

Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...

Grundlegendes zur JavaScript-Prototypenkette

Inhaltsverzeichnis 1. Verständnis der Gleichheits...

So überprüfen Sie, ob die Firewall in Linux ausgeschaltet ist

1. Servicemethode Überprüfen Sie den Firewall-Sta...

Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Ich habe schon Leute fragen hören, wie man Options...

Installationsschritte der Ubuntu 20.04-Doppelpinyin-Eingabemethode

1. Chinesische Eingabemethode einrichten 2. Stell...

Verstehen Sie das elastische CSS3 FlexBox-Layout in 10 Minuten

Grundlegende Einführung Merkmale Flexbox ist ein ...

Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner

Ich habe in letzter Zeit viel Wissen und Artikel ...