Vue2.x konfiguriert Routing-Navigations-Guards, um die Benutzeranmeldung und -beendigung zu implementieren.

Vorwort

Zuvor wurde bei der Untersuchung von Vue die Funktion des Benutzeranmeldemoduls durch die Routing-Navigationsschutzsteuerung realisiert. Wenn das Projekt nun erneut durchgeführt wird, muss der Routing-Navigationsschutz von Vue konfiguriert werden, um dieselbe Funktion zu realisieren. Hier wird der Implementierungsprozess aufgezeichnet und zusammengefasst (dieser Artikel basiert auf Vue2.x).

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. Konfigurieren Sie den Routing-Navigationsschutz

1. Global Navigation Guard

Wenn das Projekt nur ein Backend enthält, können Sie in Vue den globalen Navigationsschutz konfigurieren. Nachdem Sie den globalen Routing-Navigationsschutz eingerichtet haben, kann der Benutzer, solange das Projekt gestartet wird, nur zur Anmeldeseite springen, wenn er nicht angemeldet ist, und darf nicht zu anderen Schnittstellen springen .
Fügen Sie den folgenden Code zum Ordner router -> index.js hinzu, der bei der Installation der Vue-Router-Abhängigkeit automatisch generiert wird

router.beforeEach((bis, von, weiter) => {
  // Wenn der Zugriff auf die Anmeldeoberfläche erfolgt, dann erlauben Sie ihn direkt, wenn (to.path === '/login') return next()
  //Informationen zum Token der Benutzerseite abrufen let token = window.sessionStorage.getItem('token')
  //Wenn die Token-Daten null sind, springe zum angegebenen Pfad, if (!token) return next("/login")
  nächste()
})

Parametererklärung:

• zu: Zu welcher Schnittstelle soll gesprungen werden
• von: Von welcher Schnittstelle aus gesprungen werden soll
• next: stellt die Funktion next() dar , die zum Freigeben verwendet wird

2. Lokaler Navigationswächter

Es gibt auch eine Situation bei der Projektentwicklung, in der sowohl das Front-End als auch das Back-End gleichzeitig entwickelt werden müssen. Zu diesem Zeitpunkt kann der Routing-Navigationsschutz nicht global konfiguriert werden, da die Front-End-Schnittstelle den Benutzern angezeigt werden muss und Benutzer darauf zugreifen können, auch wenn sie nicht angemeldet sind . Daher fängt der Routing-Navigationsschutz nur den Back-End-Pfad ab.

Der Routennavigationsschutz ist immer noch im Ordner „index.js“ konfiguriert, dieses Mal gilt die Konfiguration jedoch für eine einzelne Komponente.

In meinem Projekt ist die Welcome-Komponente beispielsweise eine Hintergrundkomponente. Um nun den Routing-Navigationsschutz für diese Komponente zu konfigurieren, ersetzen Sie zunächst die globale Konfiguration von beforeEach durch beforeEnter für die Konfiguration des Navigationsschutzes für einzelne Komponenten.

Der Autor hat zuvor den Routing-Navigationsschutz in der Anmeldekomponente konfiguriert, aber er hat nicht funktioniert. Ich habe ihn hier aufgezeichnet, um einen solchen Fehler in Zukunft zu vermeiden. Fügen Sie der Komponente einfach den folgenden Code hinzu:

// Definiere die Routennavigation guard beforeEnter(to, from, next) {
      //Informationen zum Token der Benutzerseite abrufen let token = window.sessionStorage.getItem('token')
      //Wenn die Token-Daten null sind, springe zum angegebenen Pfad, if (!token) return next("/login")
      nächste()
    }

Die Parameter des lokalen Navigationswächters stimmen mit denen der globalen Konfiguration überein. Bis auf das Ersetzen von beforeEach durch beforeEnter ist der Rest gleich. Ich werde hier nicht ins Detail gehen.

2. Benutzeranmeldung

Hier wird nur der Front-End-Code angezeigt. Jeder hat seinen eigenen Stil und seine eigene Art, den Back-End-Code zu schreiben. Daher wird er hier nicht angezeigt.

1. Axios-Konfiguration

Um das Problem der Rückrufhölle im Projekt zu vermeiden, habe ich das Axios-Plugin hier importiert und Axios im Voraus in der Datei main.js konfiguriert

/* Axios-Paket importieren */
Axios von „Axios“ importieren

/* Legen Sie das angeforderte Stammverzeichnis von Axios fest */
axios.defaults.baseURL = "http://localhost:8089/"
/* Fügen Sie dem Vue-Objekt ein globales Objekt hinzu und senden Sie dann eine Ajax-Anfrage mit dem $http-Objekt*/
Vue.prototype.$http = axios

Da die globale Konfiguration in der Datei main.js durchgeführt wird, wird $http in der Komponente angezeigt, um das Stammverzeichnis der festgelegten Anforderung darzustellen, das hier http://localhost:8089/ ist.

2. Benutzer-Login-Code

// Wenn der Login-Button geklickt wird, sende Daten an den Hintergrund login() {
  dies.$refs.loginFormRef.validate(async valid => {
    wenn(!gültig) return
    const {data: result} = warte auf dies.$http.post("/user/login",this.loginForm)
    // Wenn der Statuscode im zurückgegebenen Parameter nicht 200 ist, bedeutet dies, dass die Anmeldung fehlgeschlagen ist. if(result.status !== 200) return this.$message.error("Benutzeranmeldung fehlgeschlagen")
    this.$message.success("Benutzeranmeldung erfolgreich")
    //Nach erfolgreicher Anmeldung die Token-Informationen im Sitzungsfenster speichern.sessionStorage.setItem('token',result.data)
    //Zur Homepage des Backend-Verwaltungssystems springen this.$router.push("/welcome")
})

3. Benutzer-Exit

Wenn sich der Benutzer abmeldet, muss er nur die Token-Daten in der Sitzung löschen und dann zu anderen Seiten springen. Zu diesem Zeitpunkt wird der Routing-Navigationsschutz erneut wirksam, sodass er im Vordergrund implementiert werden kann, ohne eine Verbindung zum Backend herzustellen .

1. Implementierungscode

abmelden() {
  //1. Löschen Sie die Daten im Sitzungsfenster.sessionStorage.clear()
  //2. Der Benutzer greift auf die Anmeldeseite zu: this.$router.push('/login')
}

Zusammenfassen

Das Obige ist die Funktion zum Realisieren der Benutzeranmeldung und -abmeldung nach der Konfiguration des Routing-Navigationsschutzes in Vue. Bei der Implementierung gibt es zwei Situationen: Auf die Schnittstelle kann erst zugegriffen werden, nachdem man sich beim Projekt angemeldet hat, und die Rezeption kann durchsucht werden, auch wenn der Benutzer nicht angemeldet ist. Im ersten Fall müssen Sie nur eine globale Konfiguration durchführen. Im zweiten Fall müssen Sie nur die Einzelkomponenten-Routing-Navigation in der Komponente konfigurieren, zu der Sie nach der Anmeldung springen möchten.

Dies ist das Ende dieses Artikels über die Konfiguration von Vue2.x-Routing-Navigationswächtern zur Implementierung der Benutzeranmeldung und -abmeldung. Weitere relevante Inhalte zu Anmeldung und Abmeldung von Vue-Routing-Wächtern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!