Vue implementiert Benutzeranmeldung und Token-Verifizierung

Vue implementiert Benutzeranmeldung und Token-Verifizierung

Im Falle einer vollständigen Trennung von Front-End und Back-End lautet die allgemeine Idee zur Implementierung der Token-Verifizierung im Vue-Projekt wie folgt:

1. Beim ersten Anmelden ruft das Front-End die Back-End-Anmeldeoberfläche auf und sendet den Benutzernamen und das Kennwort

2. Das Backend empfängt die Anfrage, überprüft den Benutzernamen und das Passwort und gibt bei erfolgreicher Überprüfung ein Token an das Frontend zurück.

3. Das Frontend erhält das Token, speichert es in localStorage und vuex und springt zur Routing-Seite

4. Jedes Mal, wenn das Front-End zu einer Route springt, ermittelt es, ob im localStorage ein Token vorhanden ist. Wenn nicht, springt es zur Anmeldeseite. Wenn ja, springt es zur entsprechenden Routenseite.

5. Bei jedem Aufruf der Backend-Schnittstelle müssen Sie dem Anforderungsheader ein Token hinzufügen

6. Das Backend prüft, ob sich im Anforderungsheader ein Token befindet. Wenn ein Token vorhanden ist, ruft es das Token ab und überprüft es. Wenn die Überprüfung erfolgreich ist, gibt es Daten zurück. Wenn die Überprüfung fehlschlägt (z. B. wenn das Token abläuft), gibt es 401 zurück. Wenn sich im Anforderungsheader kein Token befindet, gibt es ebenfalls 401 zurück.

7. Wenn der vom Frontend empfangene Statuscode 401 lautet, löschen Sie die Token-Informationen und springen Sie zur Anmeldeseite

vue-cli erstellt ein Projekt und erklärt kurz, was das Frontend tun muss:

1. Die Anmeldeschnittstelle wird erfolgreich aufgerufen und das Token wird in der Rückruffunktion in localStorage und vuex gespeichert

anmelden.vue

<Vorlage>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="Benutzername"/>
    <input type="text" v-model="loginForm.password" placeholder="passwort"/>
    <button @click="login">Anmelden</button>
  </div>
</Vorlage>
 
<Skript>
importiere { mapMutations } von 'vuex';
Standard exportieren {
  Daten () {
    zurückkehren {
      Anmeldeformular: {
        Benutzername: '',
        Passwort: ''
      },
      BenutzerToken: ''
    };
  },
 
  Methoden: {
    ...mapMutations(['changeLogin']),
    anmelden() {
      lass _this = dies;
      wenn (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('Konto oder Passwort dürfen nicht leer sein');
      } anders {
        dies.axios({
          Methode: 'post',
          URL: '/Benutzer/Anmelden',
          Daten: _this.loginForm
        }).dann(res => {
          Konsole.log(Res.Daten);
          _this.userToken = 'Träger ' + res.data.data.body.token;
          // Benutzertoken in vuex_this.changeLogin speichern ({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('Anmeldung erfolgreich');
        }).fangen(Fehler => {
          alert('Konto- oder Passwortfehler');
          konsole.log(Fehler);
        });
      }
    }
  }
};
</Skript> 

index.js im Store-Ordner

importiere Vue von „vue“;
importiere Vuex von „vuex“;
Vue.use(Vuex);
 
const store = neuer Vuex.Store({
 
  Zustand: {
    //Token speichern
    Autorisierung: localStorage.getItem('Autorisierung') ? localStorage.getItem('Autorisierung') : ''
  },
 
  Mutationen:
    // Ändern Sie das Token und speichern Sie es im localStorage
    changeLogin (Status, Benutzer) {
      Status.Autorisierung = Benutzer.Autorisierung;
      localStorage.setItem('Autorisierung', Benutzer.Autorisierung);
    }
  }
});
 
Standardspeicher exportieren;

2. Routing-Navigationswächter

index.js im Router-Ordner

importiere Vue von „vue“;
Router von „vue-router“ importieren;
Login aus „@/components/login“ importieren;
importiere Home von „@/components/home“;
 
Vue.use(Router);
 
const router = neuer Router({
  Routen: [
    {
      Weg: '/',
      Umleitung: '/login'
    },
    {
      Pfad: '/login',
      Name: 'Anmelden',
      Komponente: Login
    },
    {
      Pfad: '/home',
      Name: 'Heimat',
      Komponente: Home
    }
  ]
});
 
// Navigationswächter // Verwenden Sie router.beforeEach, um einen globalen Frontwächter zu registrieren, der ermittelt, ob der Benutzer angemeldet ist router.beforeEach((to, from, next) => {
  wenn (zu.Pfad === '/login') {
    nächste();
  } anders {
    let token = localStorage.getItem('Autorisierung');
 
    wenn (Token === null || Token === '') {
      weiter('/login');
    } anders {
      nächste();
    }
  }
});
 
Standardrouter exportieren;

3. Token zum Anforderungsheader hinzufügen

// Fügen Sie einen Anforderungs-Interceptor hinzu und fügen Sie dem Anforderungsheader ein Token hinzu
axios.interceptors.request.use(
  Konfiguration => {
    wenn (localStorage.getItem('Autorisierung')) {
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
 
    Konfiguration zurückgeben;
  },
  Fehler => {
    returniere Promise.reject(Fehler);
});

4. Wenn der Statuscode 401 lautet, löschen Sie die Token-Informationen und springen Sie zur Anmeldeseite

localStorage.removeItem('Autorisierung');
dies.$router.push('/login');

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • VUE implementiert Token-Anmeldeüberprüfung
  • Vue implementiert einen Login-Verifizierungscode
  • Implementierungscode für die gleitende Vue-Anmeldungsüberprüfung
  • Verwenden Sie beforeEach von vue-route, um die Funktion „Navigation Guard“ (Anmeldung vor Routensprung überprüfen) zu implementieren.
  • Vue tatsächlicher Implementierungscode zur Vue-Anmeldeüberprüfung im Kampf
  • Implementierungscode für die Vue-Anmelderegistrierung und Token-Verifizierung
  • So implementieren Sie den Anmeldestatus zur Verifizierung in Vue
  • Vue Router + Vuex implementiert eine Login-Verifizierungslogik für die Homepage
  • Ein Beispiel für die Verwendung des Routing-Hooks durch Vue, um nach Ablauf des Tokens zur Anmeldeseite zu springen
  • Anmeldung zur Token-Verifizierung im Vue-Projekt (Front-End-Teil)

<<:  Tutorial zur Installation von Ubuntu 20.04 und NVIDIA-Treibern

>>:  MySQL-Tabellenübergreifende Abfrage und Tabellenübergreifende Aktualisierung

Artikel empfehlen

So installieren und implementieren Sie einen FTP-Image-Server unter Linux

Lesen Sie das Tutorial zum Einrichten eines FTP-S...

Analyse der Verwendung des MySQL-Datenbankbefehls „show processlist“

Wenn bei der tatsächlichen Projektentwicklung die...

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

Inhaltsverzeichnis 1. Vertikales (längsseitiges) ...

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Inhaltsverzeichnis Einführung in utf8mb4 Fehler b...

Elementui exportiert Daten in XLSX- und Excel-Tabellen

Kürzlich habe ich vom Vue-Projekt erfahren und bi...

Detaillierte Erklärung zur Verwendung von umask unter Linux

Ich habe vor Kurzem angefangen, Linux zu lernen. ...

Detaillierte Erläuterung der MySQL 8.0-Richtlinie zum Ablauf von Passwörtern

Ab MySQL 8.0.16 können Sie eine Richtlinie zum Ab...

JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...

HTML-Tags: Sub-Tag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...

Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster

1. Knoten löschen Führen Sie kubectl delete node ...