So verwenden Sie Vue.js-Navigationswächter, um den Zugriff auf Routen einzuschränken

Blog

So verwenden Sie Vue.js-Navigationswächter, um den Zugriff auf Routen einzuschränken

So verwenden Sie Vue.js-Navigationswächter, um den Zugriff auf Routen einzuschränken

In diesem Tutorial erfahren Sie, wie Sie Vuex mit Vue.js-Navigationswächtern verwenden, um bestimmte Seiten innerhalb der Anwendung vor unbefugtem Zugriff zu schützen.

Erstellen Sie ein neues Vue.js-Projekt mit der Vue-CLI

Um dieses Tutorial einfach und leicht verständlich zu halten, beginnen wir mit einem neuen Projekt, das mit dem erstellt wurde CLI-Ansicht . Im Moment verwende ich 3.9.3 der Vue-CLI.

Führen Sie über das Terminal oder die Eingabeaufforderung den folgenden Befehl aus, um ein neues Projekt zu erstellen:

vue create navguard-project

Während wir den Vue Router verwenden, sollten Sie ihn nicht mit der CLI aktivieren. Wählen Sie stattdessen die Standardeinstellungen, wenn Sie dazu aufgefordert werden, und schließen Sie den Assistenten für die Projektgenerierung ab.

Nachdem das Projekt erstellt wurde, navigieren Sie in das Projekt und führen Sie Folgendes aus:

npm install vuex --save npm install vue-router --save

Wir verwenden Vuex, um unseren Authentifizierungsstatus während der gesamten Anwendung zu speichern. In einem realistischen Szenario würde das JSON Web Token (JWT) gespeichert werden, aber dies ist ein einfaches Beispiel ohne verbundene APIs oder Datenbanken. Wir verwenden den Vue Router, um zwischen Routen oder Komponenten zu navigieren.


Das könnte Ihnen auch gefallen: Vue-Authentifizierung und Routenbehandlung mit Vue-Router


Definieren Sie die eingeschränkte Route als Vue.js-Komponente

Bevor wir uns um unsere Navigationswächter oder die Routinglogik kümmern, erstellen wir zunächst die Komponente, die wir sichern möchten. Im Projekt src/komponenten Verzeichnis, erstellen Sie ein Secure.vue Datei mit folgendem Code:

Login export default { name: 'Login', data() { return { input: { username: '', password: '' } } }, methods: { login() { if(this.input.username == 'admin' && this.input.password == 'pass') { // Additional logic here... } else { console.log('The username and / or password is incorrect'); } } } }

Obwohl er sehr einfach ist, wird sich der obige Code im Laufe der Zeit leicht ändern. Der Zweck besteht vorerst darin, ein einfaches Formular mit gebundenen Variablen anzuzeigen. Beim Versuch, das Formular abzusenden, wird die Login-Methode aufgerufen und wir validieren den angegebenen Benutzernamen und das Passwort.

Ich kann dies nicht genug betonen, aber dies ist ein einfaches Beispiel für simulierte Daten. In einem Produktionsszenario stellen Sie wahrscheinlich eine HTTP-Anfrage an Ihren Server, um den Benutzernamen und das Kennwort zu überprüfen, die der Benutzer mit dem Benutzernamen und Kennwort in Ihrer Datenbank bereitstellt. Dies liegt außerhalb des Rahmens dessen, was wir erreichen wollen.

Autorisierungsstatus im Vuex Data Store speichern

Mit den beiden Komponenten, die schließlich Routen sein werden, können wir uns auf unseren Datenspeicher konzentrieren. Dies ist nicht mit einer Datenbank zu verwechseln, da dieser Datenspeicher nur ein globaler Speichermechanismus ist, der während der gesamten Lebensdauer der Benutzersitzung in der Anwendung verwendet wird.

Um den Vuex Store zu konfigurieren, müssen wir einige Änderungen an der Datei src/main.js des Projekts vornehmen. Öffnen Sie diese Datei und fügen Sie Folgendes hinzu:

import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.config.productionTip = false; Vue.use(Vuex); const store = new Vuex.Store( { state: { authenticated: false }, mutations: { setAuthentication(state, status) { state.authenticated = status; } } } ); new Vue({ render: h => h(App), store: store }).$mount('#app')

Beachten Sie, dass wir Vuex importiert, einen neuen Store definiert und zum Hauptkonstruktor |_+_| hinzugefügt haben.

Im Store selbst haben wir eine Variable, die wir verwenden möchten. Die |_+_| Variable ist ein boolescher Wert, der standardmäßig auf false gesetzt ist. Die Idee dahinter ist, dass wir bei 'false' nicht auf die sichere Seite zugreifen können sollten, aber bei 'true' sollten wir in der Lage sein, auf die sichere Seite zuzugreifen. Da wir Daten in der Variablen nicht direkt ändern können, müssen wir eine Mutation erstellen. Der Zweck der Mutation besteht darin, die Variable zwischen wahr und falsch zu setzen.

sichere Galaxie-Kryptomünze

Nachdem wir Vuex konfiguriert haben, können wir eine kleine Änderung an den Login.vue Komponente:

Vue

Im|_+_| Methode nutzen wir jetzt die Mutation durch einen |_+_|Befehl. Wenn die |_+_| erfolgreich ist, sagen wir, dass unser Authentifizierungsstatus jetzt wahr ist. Wir werden diese Anmeldemethode noch einmal besuchen, aber zumindest können wir jetzt den Authentifizierungsstatus während der gesamten Anwendung ändern.

Dies führt uns zur eigentlichen Navigation.

Definieren von Navigationsrouten und Bewachen des Zugangs

So wie es aussieht, haben wir zwei Komponenten, aber sie verhalten sich nicht wirklich wie Seiten, zwischen denen Sie navigieren können. Das bedeutet, dass wir ein paar Dinge ändern müssen, um daraus Routen zu machen.

Öffnen Sie die Datei src/main.js des Projekts und nehmen Sie die folgenden Änderungen vor:

authenticated

Beachten Sie, dass wir diesmal auch den Vue Router importiert, einige Routen definiert und zum |_+_| . hinzugefügt haben Konstruktor-Methode.

Es gibt zwei Routen in unserem Router, eine für die Anmeldung und eine für eine sichere Seite. Da sich die Login-Route nicht im Root-Pfad befindet, leiten wir sie einfach auf die Login-Route um, wenn jemand versucht, auf den Root-Pfad zuzugreifen. Was uns in diesem Beispiel am wichtigsten ist, ist die |_+_| Methode:

methods: { login() { if(this.input.username == 'admin' && this.input.password == 'pass') { this.$store.commit('setAuthentication', true); } else { console.log('The username and / or password is incorrect'); } } }

Immer wenn wir versuchen, auf die . zuzugreifen Secure.vue Komponente, die |_+_| Methodenauslöser. Wir überprüfen den Vuex-Store auf den Authentifizierungsstatus und wenn er sagt, dass wir nicht authentifiziert sind, stoppen wir unsere Aktivitäten und unterbrechen die Navigation auf der Seite. Ansonsten gehen wir in die Route ein.

Nehmen wir also einige letzte Überarbeitungen vor.

Öffnen Sie das Projekt src / App.vue Datei und lassen Sie es wie folgt aussehen:

login

Wir haben viele Sachen entfernt, aber das Wichtigste, was wir jetzt haben, ist das |_+_|. Dies dient als Ausgang zu unseren Routen. Die Vorlagen in jeder Komponente werden in diesen Tags gerendert.

Da unsere Komponenten jetzt als Routen gerendert werden, führen wir noch keine Navigation durch.

Öffnen Sie das Projekt src/components/Login.vue Datei und nehmen Sie folgende Änderung an der |_+_|Methode vor:

commit

Nachdem wir den Authentifizierungsstatus festgelegt haben, versuchen wir, in den sicheren Bereich zu routen. Denken Sie daran, dass die Navigation nicht stattfindet, wenn Sie versuchen, in den sicheren Bereich zu gelangen, bevor Sie den Authentifizierungsstatus aktualisieren, da dies durch den Navigationswächter verhindert wird.

Abschluss

Sie haben gerade gesehen, wie Sie Navigationswachen in einer Vue.js-Anwendung verwenden, um den Zugriff auf bestimmte Routen einzuschränken. Dies ist für viele Dinge nützlich, z. B. für die Benutzeranmeldung in Ihrer Anwendung, aber auch für viele andere Szenarien.

Erfahren Sie mehr

Vue Router-Tutorial - Navigation Guards

#vue-js #javascript