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. 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:
|
<<: URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben
>>: Detaillierte Erklärung der HTML-Tabellen-Tags (für Anfänger geeignet)
Vorwort Bei der tatsächlichen Entwicklung werden ...
Flexibles Layout (Flexbox) erfreut sich zunehmend...
Vorschau: Code: Seitenabschnitte: <Vorlage>...
Wenn Sie nach Inspiration für spaltenbasiertes Web...
Wenn Sie in React den Status direkt mit this.stat...
Umfeld: 1 CentOS Linux-Version 7.5.1804 (Core) Fi...
Aktivieren Sie den Fernzugriff Aktivieren Sie die...
Inhaltsverzeichnis 1. MySQL-Architektur 2. Netzwe...
1. Einleitung: Wenn wir Flash-Inhalte normal auf d...
Inhaltsverzeichnis Vorwort: 1. Erstellen Sie ein ...
Verwenden Sie die FRAME-Eigenschaft, um den Stilt...
Apollo Open Source-Adresse: https://github.com/ct...
Der Befehl zum Löschen von Bildern im Docker laut...
Vorwort Der Dienst wird seit mehreren Monaten auf...
Vorwort In „High Performance MySQL“ wird erwähnt,...