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

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren

Vorwort Bei der tatsächlichen Entwicklung werden ...

Die einfachste Formularimplementierung des Flexbox-Layouts

Flexibles Layout (Flexbox) erfreut sich zunehmend...

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Vorschau: Code: Seitenabschnitte: <Vorlage>...

32 typische spalten-/rasterbasierte Websites

Wenn Sie nach Inspiration für spaltenbasiertes Web...

Detaillierte Erklärung gängiger Befehle in MySQL 8.0+

Aktivieren Sie den Fernzugriff Aktivieren Sie die...

Details zur MySQL-Datenbankarchitektur

Inhaltsverzeichnis 1. MySQL-Architektur 2. Netzwe...

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

Verwenden Sie die FRAME-Eigenschaft, um den Stilt...

So löschen Sie ein Image in Docker

Der Befehl zum Löschen von Bildern im Docker laut...

So ändern Sie das Root-Passwort von MySQL unter Linux

Vorwort Der Dienst wird seit mehreren Monaten auf...

Tutorial zur SQL-Optimierung: IN- und RANGE-Abfragen

Vorwort In „High Performance MySQL“ wird erwähnt,...