Lernen Sie die Vue-Middleware-Pipeline in einem Artikel kennen

Beim Erstellen eines SPA müssen Sie häufig bestimmte Routen schützen. Angenommen, es gibt eine Dashboard-Route, auf die nur authentifizierte Benutzer zugreifen können. Wir können Authentifizierungs-Middleware verwenden, um sicherzustellen, dass nur legitime Benutzer darauf zugreifen können.

In diesem Tutorial lernen wir, wie man mit Vue-Router[1] eine Middleware-Pipeline für eine Vue-Anwendung implementiert.

Was ist eine Middleware-Pipeline?

Eine Middleware-Pipeline besteht aus einer Reihe verschiedener Middlewares, die parallel zueinander ausgeführt werden.

Um mit dem vorherigen Beispiel fortzufahren, nehmen wir an, dass wir unter /dashboard/movies eine weitere Route haben, auf die nur angemeldete Benutzer Zugriff haben sollen. Wir wissen bereits, dass Sie authentifiziert sein müssen, um auf die Dashboard-Route zugreifen zu können. Wie sollten wir also die Route /dashboard/movies schützen, um sicherzustellen, dass nur authentifizierte und abonnierte Benutzer darauf zugreifen können? Durch die Verwendung einer Middleware-Pipeline können Sie mehrere Middleware-Programme miteinander verketten und sicherstellen, dass sie parallel ausgeführt werden können.

Start

Verwenden Sie zunächst die Vue CLI[2], um schnell ein neues Vue-Projekt zu erstellen.

vue erstellen vue-middleware-pipeline

Installieren von Abhängigkeiten

Sobald das Projektverzeichnis erstellt und installiert ist, wechseln Sie in das neu erstellte Verzeichnis und führen Sie den folgenden Befehl von Ihrem Terminal aus:

npm und vue-router vuex

Vue-router[3] — ist der offizielle Router für Vue.js

Vuex[4] — ist eine State-Management-Bibliothek für Vue

Komponenten erstellen

Unser Programm wird aus drei Komponenten bestehen.

Anmelden – Diese Komponente wird Benutzern angezeigt, die noch nicht authentifiziert sind.

Dashboard – Diese Komponente wird angemeldeten Benutzern angezeigt.

Filme – Wir zeigen diese Komponente Benutzern, die angemeldet sind und über ein aktives Abonnement verfügen.

Lassen Sie uns diese Komponenten erstellen. Wechseln Sie in das Verzeichnis src/components und erstellen Sie die folgenden Dateien: Dashboard.vue, Login.vue und Movies.vue

Bearbeiten Sie die Datei Login.vue mit dem folgenden Code:

<Vorlage>
  <div>
    <p>Dies ist die Login-Komponente</p>
  </div>
</Vorlage>

Bearbeiten Sie die Datei Dashboard.vue mit dem folgenden Code:

<Vorlage>
  <div>
    <p>Dies ist die Dashboard-Komponente für authentifizierte Benutzer</p>
    <Router-Ansicht/>
  </div>
</Vorlage>

Fügen Sie abschließend den folgenden Code zu Ihrer Movies.vue-Datei hinzu:

<Vorlage>
  <div>
    <p>Dies ist die Komponente „Filme“ für authentifizierte und abonnierte Benutzer</p>
  </div>
</Vorlage>

Einen Shop erstellen

Für Vuex ist der Store lediglich ein Container zum Speichern des Status unseres Programms. Damit können wir feststellen, ob der Benutzer authentifiziert ist und prüfen, ob er angemeldet ist.

Erstellen Sie im Ordner „src“ eine Datei „store.js“ und fügen Sie ihr den folgenden Code hinzu:

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Zustand: {
        Benutzer: {
            eingeloggt: false,
            ist abonniert: false
        }
    },
    Getter: {
        auth(Status) {
            Status des Benutzers zurückgeben
        }
    }
})

Der Store enthält in seinem Status ein Benutzerobjekt. Das Benutzerobjekt enthält die Eigenschaften „loggedIn“ und „isSubscribed“, mit deren Hilfe wir feststellen können, ob der Benutzer angemeldet ist und über ein gültiges Abonnement verfügt. Wir haben im Store auch einen Getter definiert, um das Benutzerobjekt zurückzugeben.

Routen definieren

Bevor Sie Routen erstellen, sollten Sie diese definieren und die entsprechende Middleware zuordnen, die an sie angehängt wird.

/login ist für alle außer authentifizierten Benutzern zugänglich. Wenn ein authentifizierter Benutzer diese Route besucht, sollte er zur Dashboard-Route umgeleitet werden. An diese Route sollte eine Gast-Middleware angebunden sein.

Nur authentifizierte Benutzer können auf /dashboard zugreifen. Andernfalls sollte der Benutzer beim Zugriff auf diese Route zur Route /login umgeleitet werden. Wir verknüpfen die Authentifizierungs-Middleware mit dieser Route.

Nur authentifizierte und angemeldete Benutzer können auf /dashboard/movies zugreifen. Diese Route wird durch die isSubscribed- und Auth-Middleware geschützt.

Routen erstellen

Erstellen Sie als Nächstes einen Router-Ordner im src-Verzeichnis und dann eine router.js-Datei in diesem Ordner. Bearbeiten Sie die Datei mit dem folgenden Code:

Vue von „vue“ importieren
Router von „vue-router“ importieren
Store aus „../store“ importieren

Login aus '../components/Login' importieren
Dashboard aus „../components/Dashboard“ importieren
Filme importieren aus '../components/Movies'


Vue.use(Router)

const router = neuer Router({
    Modus: "Verlauf",
    Basis: Prozess.Umgebung.BASE_URL,
    Routen: [
        {
            Pfad: '/login',
            Name: 'Anmelden',
            Komponente: Login
        },

        {
            Pfad: '/dashboard',
            Name: "Dashboard",
            Komponente: Dashboard,
            Kinder: [{
                Pfad: '/dashboard/movies',
                Name: 'dashboard.movies',
                Komponente: Filme
            }
        ],
        }
    ]
})


Standardrouter exportieren

Hier erstellen wir eine neue Routerinstanz und übergeben ihr einige Konfigurationsoptionen sowie eine Routeneigenschaft, die alle zuvor definierten Routen aufnimmt. Beachten Sie, dass diese Routen derzeit ungeschützt sind. Wir werden dieses Problem in Kürze beheben.

Als Nächstes fügen Sie die Routen ein und speichern sie in der Vue-Instanz. Bearbeiten Sie die Datei src/main.js mit dem folgenden Code:

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router/router“ importieren
Store aus „./store“ importieren

Vue.config.productionTip = falsch


neuer Vue({
  Router,
  speichern,
  rendern: h => h(App),
}).$mount('#app')

Erstellen von Middleware

Erstellen Sie einen Middleware-Ordner im Verzeichnis src/router und erstellen Sie dann in diesem Ordner die Dateien guest.js, auth.js und IsSubscribed.js. Fügen Sie der Datei guest.js den folgenden Code hinzu:

exportiere Standardfunktion Gast ({ weiter, speichern }) {
    wenn (store.getters.auth.loggedIn) {
        zurück nächste({
           Name: "Armaturenbrett"
        })
    }
   
    returniere nächstes()
   }

Die Gast-Middleware prüft, ob der Benutzer authentifiziert ist. Wenn die Authentifizierung erfolgreich ist, werden Sie zum Dashboard-Pfad weitergeleitet.

Bearbeiten Sie als Nächstes die Datei auth.js mit dem folgenden Code:

exportiere Standardfunktion auth ({nächstes, speichern}) {
 wenn (!store.getters.auth.loggedIn) {
     zurück als nächstes({
        Name: "Anmelden"
     })
 }

 returniere nächstes()
}

In der Auth-Middleware verwenden wir den Store, um zu überprüfen, ob der Benutzer aktuell authentifiziert ist. Je nachdem, ob der Benutzer bereits angemeldet ist, führen wir die Anfrage entweder weiter oder leiten ihn auf die Anmeldeseite weiter.

Bearbeiten Sie die Datei isSubscribed.js mit dem folgenden Code:

Export-Standardfunktion isSubscribed ({ weiter, speichern }) {
    wenn (!store.getters.auth.isSubscribed) {
        zurück als nächstes({
           Name: "Armaturenbrett"
        })
    }
   
    returniere nächstes()
   }

Die Middleware in isSubscribed ähnelt der Auth-Middleware. Wir verwenden den Store, um zu überprüfen, ob der Benutzer angemeldet ist. Wenn der Benutzer angemeldet ist, kann er auf die erwartete Route zugreifen, andernfalls wird er zurück zur Dashboard-Seite umgeleitet.

Routen schützen

Nachdem nun unsere gesamte Middleware erstellt ist, verwenden wir sie zum Schutz unserer Routen. Bearbeiten Sie die Datei src/router/router.js mit dem folgenden Code:

Vue von „vue“ importieren
Router von „vue-router“ importieren
Store aus „../store“ importieren

Login aus '../components/Login' importieren
Dashboard aus „../components/Dashboard“ importieren
Filme importieren aus '../components/Movies'

Gast aus „./middleware/guest“ importieren
Authentifizierung aus „./middleware/auth“ importieren
importiere isSubscribed aus './middleware/isSubscribed'

Vue.use(Router)

const router = neuer Router({
    Modus: "Verlauf",
    Basis: Prozess.Umgebung.BASE_URL,
    Routen: [{
            Pfad: '/login',
            Name: 'Anmelden',
            Komponente: Login,
            Meta: {
                Middleware:
                    Gast
                ]
            }
        },
        {
            Pfad: '/dashboard',
            Name: "Dashboard",
            Komponente: Dashboard,
            Meta: {
                Middleware:
                    Authentifizierung
                ]
            },
            Kinder: [{
                Pfad: '/dashboard/movies',
                Name: 'dashboard.movies',
                Komponente: Filme,
                Meta: {
                    Middleware:
                        Auth,
                        ist abonniert
                    ]
                }
            }],
        }
    ]
})

Standardrouter exportieren

Hier haben wir unsere gesamte Middleware importiert und dann für jede Route ein Metafeld definiert, das ein Middleware-Array enthält. Das Middleware-Array enthält die gesamte Middleware, die wir einer bestimmten Route zuordnen möchten.

Vue-Routing-Navigationsschutz

Zum Schutz von Routen verwenden wir die von Vue Router bereitgestellten Navigation Guards[5]. Diese Schifffahrtswächter schützen Routen, indem sie diese umleiten oder streichen.

Einer der Wächter ist der globale Wächter, bei dem es sich normalerweise um einen Hook handelt, der aufgerufen wird, bevor eine Route ausgelöst wird. Um einen globalen Schutz zu registrieren, müssen Sie eine beforeEach-Methode auf der Routerinstanz definieren.

const router = neuer Router({ ... })
router.beforeEach((bis, von, weiter) => {
 //notwendige Logik um den Hook aufzulösen
})

Die Methode beforeEach erhält drei Parameter:

zu: Dies ist die Route, die wir erreichen möchten.

von: Dies ist unsere aktuelle Route.

weiter: Dies ist die Funktion, die den Hook aufruft.

Ausführen von Middleware

Mit dem beforeEach-Hook können wir unsere Middleware ausführen.

const router = neuer Router({ ...})

router.beforeEach((bis, von, weiter) => {
    wenn (!to.meta.middleware) {
        returniere nächstes()
    }
    const middleware = to.meta.middleware

    const Kontext = {
        Zu,
        aus,
        nächste,
        speichern
    }
    returniere Middleware[0]({
        ...Kontext
    })
})

Wir prüfen zunächst, ob die Route, die wir aktuell verarbeiten, ein Metafeld mit einem Middleware-Attribut hat. Wenn das Middleware-Attribut gefunden wird, wird es der const-Variable zugewiesen. Als nächstes definieren wir ein Kontextobjekt, das alles enthält, was wir an jede Middleware übergeben müssen. Rufen Sie dann die erste Middleware im Middleware-Array als Funktion auf und übergeben Sie das Kontextobjekt.

Versuchen Sie, auf die Route /dashboard zuzugreifen. Sie sollten zur Anmelderoute umgeleitet werden. Dies liegt daran, dass die Eigenschaft store.state.user.loggedIn in /src/store.js auf „false“ gesetzt ist. Ändern Sie die Eigenschaft store.state.user.loggedIn auf „true“, und Sie sollten auf die Route /dashboard zugreifen können.

Jetzt funktioniert die Middleware, allerdings nicht so, wie wir es uns wünschen. Unser Ziel ist die Implementierung einer Pipeline, die mehrere Middlewares für einen bestimmten Pfad ausführen kann.

returniere Middleware[0]({ …Kontext} "0")
Beachten Sie, dass wir im obigen Codeblock nur die erste Middleware aufrufen, die vom Middleware-Array im Metafeld übergeben wird. Wie stellen wir also sicher, dass die anderen im Array enthaltenen Middlewares (sofern vorhanden) ebenfalls aufgerufen werden? Hier kommen Rohre ins Spiel.

Erstellen einer Pipeline

Wechseln Sie in das Verzeichnis src/router und erstellen Sie eine Datei middlewarePipeline.js. Fügen Sie der Datei den folgenden Code hinzu:

Funktion MiddlewarePipeline (Kontext, Middleware, Index) {
    const nextMiddleware = middleware[index]

    wenn(!nextMiddleware){
        Kontext zurückgeben.nächster 
    }

    zurückgeben () => {
        const nextPipeline = middlewarePipeline(
            Kontext, Middleware, Index + 1
        )

        nächsteMiddleware({ ...Kontext, nächste: nächstePipeline })

    }
}

Standard-MiddlewarePipeline exportieren

middlewarePipeline hat drei Parameter:

Kontext: Dies ist das Kontextobjekt, das wir zuvor erstellt haben und das an jede Middleware im Stapel übergeben werden kann.

Middleware: Dies ist das Middleware-Array selbst, das im Metafeld der Route definiert ist.

Index: Dies ist der Index der aktuellen Middleware, die im Middleware-Array ausgeführt werden soll.

const nextMiddleware = middleware[index]
wenn(!nextMiddleware){
Kontext zurückgeben.nächster
}

Hier ziehen wir einfach die Middleware im Index heraus, der an die Funktion „middlewarePipeline“ übergeben wird. Wenn am Index keine Middleware gefunden wird, wird der standardmäßige nächste Rückruf zurückgegeben.

zurückgeben () => {
const nextPipeline = middlewarePipeline(
Kontext, Middleware, Index + 1
)
nächsteMiddleware({ ...Kontext, nächste: nächstePipeline })
}

Wir rufen nextMiddleware auf und übergeben den Kontext und dann die nextPipeline-Konstante. Es ist erwähnenswert, dass die Funktion „middlewarePipeline“ eine rekursive Funktion ist, die sich selbst aufruft, um die nächste Middleware im Stapel auszuführen, während der Index auf 1 erhöht wird.

Alles zusammenfügen

Verwenden wir MiddlewarePipeline. Bearbeiten Sie die Datei src/router/router.js wie folgt:

Vue von „vue“ importieren
Router von „vue-router“ importieren
Store aus „../store“ importieren

Login aus '../components/Login' importieren
Dashboard aus „../components/Dashboard“ importieren
Filme importieren aus '../components/Movies'

Gast aus „./middleware/guest“ importieren
Authentifizierung aus „./middleware/auth“ importieren
importiere isSubscribed aus './middleware/isSubscribed'
importiere middlewarePipeline aus „./middlewarePipeline“

Vue.use(Router)

const router = neuer Router({
    Modus: "Verlauf",
    Basis: Prozess.Umgebung.BASE_URL,
    Routen: [{
            Pfad: '/login',
            Name: 'Anmelden',
            Komponente: Login,
            Meta: {
                Middleware:
                    Gast
                ]
            }
        },
        {
            Pfad: '/dashboard',
            Name: "Dashboard",
            Komponente: Dashboard,
            Meta: {
                Middleware:
                    Authentifizierung
                ]
            },
            Kinder: [{
                Pfad: '/dashboard/movies',
                Name: 'dashboard.movies',
                Komponente: Filme,
                Meta: {
                    Middleware:
                        Auth,
                        ist abonniert
                    ]
                }
            }],
        }
    ]
})

router.beforeEach((bis, von, weiter) => {
    wenn (!to.meta.middleware) {
        returniere nächstes()
    }
    const middleware = to.meta.middleware
    const Kontext = {
        Zu,
        aus,
        nächste,
        speichern
    }

    returniere Middleware[0]({
        ...Kontext,
        weiter: middlewarePipeline(Kontext, Middleware, 1)
    })
})

Standardrouter exportieren

Hier verwenden wir <code> middlewarePipeline <code>, um die nachfolgende im Stapel enthaltene Middleware auszuführen.

returniere Middleware[0]({
...Kontext,
weiter: middlewarePipeline(Kontext, Middleware, 1)
})

Nachdem die erste Middleware mithilfe der Funktion „middlewarePipeline“ aufgerufen wurde, wird auch die nachfolgende Middleware im Stapel aufgerufen, bis keine weitere Middleware verfügbar ist.

Wenn Sie auf die Route /dashboard/movies zugreifen, sollten Sie zu /dashboard umgeleitet werden. Dies liegt daran, dass der Benutzer aktuell authentifiziert ist, aber über kein gültiges Abonnement verfügt. Wenn Sie die Eigenschaft store.state.user.isSubscribed in Ihrem Store auf „true“ setzen, sollten Sie auf die Route /dashboard/movies zugreifen können.

Zusammenfassen

Middleware ist eine großartige Möglichkeit, verschiedene Routen in Ihrer Anwendung zu schützen. Dies ist eine sehr einfache Implementierung der Verwendung mehrerer Middlewares zum Schutz einer einzelnen Route in einer Vue-Anwendung.

Dies ist das Ende dieses Artikels zum Erlernen der Vue-Middleware-Pipeline in einem Artikel. Weitere relevante Inhalte zur Vue-Middleware-Pipeline 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!