Vue-Routing zum Implementieren der Login-Abfangung

1. Übersicht

Bei der Projektentwicklung muss bei jedem Routenwechsel oder Aktualisieren einer Seite festgestellt werden, ob der Benutzer angemeldet ist. Das Frontend kann dies beurteilen, und das Backend wird dies ebenfalls beurteilen. Am besten ist es, wenn unser Frontend dies ebenfalls beurteilen kann.

vue-router bietet Navigations-Hooks: globalen Vornavigations-Hook beforeEach und globalen Post-Navigations-Hook afterEach, die vor und nach der Routenänderung ausgelöst werden. Daher muss im beforeEach-Navigations-Hook ermittelt werden, ob der Benutzer angemeldet ist.

Der Navigations-Hook hat 3 Parameter:

1. nach: das einzutragende Ziel-Routingobjekt;

2. von: dem Routenobjekt, das die aktuelle Navigation verlassen wird;

3. next: Erst nach dem Aufruf dieser Methode können Sie in die nächste Hook-Funktion (afterEach) einsteigen.

next()//Gehe direkt zu der Route, auf die to zeigt
next(false) //Unterbreche die aktuelle Route
next('route') // Zur angegebenen Route springen
next('error') //zur Fehlerroute springen

2. Routing Navigation Guard zur Implementierung der Login-Abfangung

Hier verwenden wir zur Demonstration ein leeres Vue-Projekt. Es gibt hauptsächlich zwei Seiten, nämlich die Startseite und die Anmeldung.

Beim Besuch der Homepage müssen Sie sich anmelden, andernfalls werden Sie auf die Anmeldeseite weitergeleitet.

Erstellen Sie ein leeres Vue-Projekt und erstellen Sie Login.vue in src\components

<Vorlage>
 <div>Dies ist die Anmeldeseite</div>
</Vorlage>

<Skript>
 Standard exportieren {
  Name: "Anmelden"
 }
</Skript>

<Stilbereich>

</Stil>

Ändern Sie src\router\index.js

Vue von „vue“ importieren
Router von „vue-router“ importieren
importiere HelloWorld aus '@/components/HelloWorld'
Login aus '@/components/Login' importieren


Vue.use(Router)

const router = neuer Router({
 Modus: „Verlauf“, // entferne das # in der URL
 Routen: [
 {
  Pfad: '/login',
  Name: 'Anmelden',
  Meta: {
  Titel: 'Anmelden',
  requiresAuth: false, // false bedeutet, dass keine Anmeldung erforderlich ist},
  Komponente: Login
 },
 {
  Weg: '/',
  Name: "Hallo Welt",
  Meta: {
  Titel: 'Homepage',
  requiresAuth: true, // true bedeutet, dass eine Anmeldung erforderlich ist},
  Komponente: HelloWorld
 },

 ]
})

// Routing-Abfangen, bestimmen, ob eine Anmeldung erforderlich ist router.beforeEach((to, from, next) => {
 wenn (zu.meta.title) {
 //Feststellen, ob ein Titel vorhanden ist document.title = to.meta.title;
 }
 // console.log("Titel",Dokument.Titel)
 // Verwenden Sie requiresAuth, um zu bestimmen, ob für die aktuelle Routennavigation eine Anmeldung erforderlich ist, if (to.matched.some(record => record.meta.requiresAuth)) {
 let token = localStorage.getItem('token')
 // konsole.log("Token",Token)
 // Wenn ein Login-Zugriff erforderlich ist, prüfen Sie, ob der Benutzer angemeldet ist, if (!token) {
  nächste({
  Pfad: '/login',
  Abfrage: { Umleitung: zu.vollständigerPfad }
  })
 } anders {
  nächste()
 }
 } anders {
 next() // Stellen Sie sicher, dass Sie next() aufrufen.
 }
})

Standardrouter exportieren;

veranschaulichen:

In jeder Route werden Metadaten hinzugefügt. Das Feld „requiresAuth“ wird verwendet, um anzugeben, ob eine Anmeldung erforderlich ist.

In router.beforeEach wird eine Tokenprüfung durchgeführt. Wenn es leer ist, springe zur Anmeldeseite.

Zur Homepage

http://localhost:8080

Springt zu

http://localhost:8080/login?redirect=%2F

Die Wirkung ist wie folgt:

Öffnen Sie F12, rufen Sie die Konsole auf und schreiben Sie manuell ein Token

localStorage.setItem('Token', '12345678910')

Die Wirkung ist wie folgt:

Besuchen Sie die Homepage erneut und Sie können normal darauf zugreifen.

Öffnen Sie die Anwendung, löschen Sie den Wert im lokalen Speicher, klicken Sie mit der rechten Maustaste und klicken Sie auf „Löschen“

Aktualisieren Sie die Seite und Sie werden zur Anmeldeseite weitergeleitet.

Wie wäre es, ist es nicht einfach?

Oben finden Sie Einzelheiten zur Implementierung der Login-Abfangfunktion mit Vue-Routing. Weitere Informationen zur Vue-Login-Abfangfunktion finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!