Im Front-End sind Middlewares Codeblöcke, die ausgeführt werden, bevor die Navigation zu einer neuen Seite erfolgt und es uns ermöglicht, verschiedene Steuerelemente in unserer Anwendung durchzuführen, wie z :
Middleware fungiert als Zwischenschicht und agiert vom Beginn des Ladens der Seite bis zur vollständigen Darstellung.
Diese Middleware-Funktionalität ist in modernen Front-End-Frameworks wie Next.js und Nuxt.JS vorhanden.
In diesem Artikel werde ich Ihnen beibringen, wie Sie Route Middleware in Nuxt.JS implementieren.
Um es einfacher zu erklären, verwende ich eine Analogie:
Stellen Sie sich vor, Sie möchten einer Partei beitreten, und in diesem Prozess durchlaufen Sie drei Sicherheitsmitarbeiter der Partei, die „Middlewares“, und jeder von ihnen ist für die Durchführung einer bestimmten Aktion verantwortlich.
Der erste Wachmann prüft, ob Sie ein Ticket haben und ob dieses gültig ist, ähnlich einer Authentifizierungs-Middleware. Wenn Sie kein Ticket haben, werden Sie zum Ticketschalter oder zum Anmeldebildschirm weitergeleitet.
Der zweite Wachmann prüft, ob Sie volljährig sind, eine wesentliche Voraussetzung für den Zutritt zur Party, ähnlich wie bei der Berechtigungs-Middleware. Wenn Sie nicht über die erforderliche Eintrittserlaubnis verfügen, werden Sie aus der Parteilinie weitergeleitet.
Der dritte und letzte Wachmann überreicht Ihnen ein Identifikationsarmband, das signalisiert, ob Sie Zugang zum VIP-Bereich der Party haben, ähnlich einer Middleware, die Daten zu Anfragen hinzufügen kann.
Nachdem Sie alle vorherigen Schritte durchlaufen haben, können Sie endlich den Partyraum betreten.
In Nuxt.js haben wir die folgenden Arten von Middleware:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
In benannter Middleware muss definiert werden, welche Seiten eine bestimmte Middleware verwenden. Eine Möglichkeit, dies zu erreichen, besteht darin, die Dateien der Seiten zu ändern, die diese Middleware verwenden:
1 2 3 4 5 |
|
Es ist auch wichtig zu erwähnen, dass selbst wenn Sie die Middleware-Dateien in Mustern wie PascalCase oder camelCase benennen, die Dateinamen auf das Kebab-Case-Muster normalisiert werden.
Ich hoffe, dass ich Ihnen mit diesem Artikel auf einfache und schnelle Weise die wichtigsten Punkte der Erstellung und Verwendung von Middleware in Nuxt.JS erklären konnte ??♂️.
Wenn Sie weitere Informationen über Middleware in Nuxt.JS benötigen, können Sie die offizielle Dokumentation durchsuchen.
Das obige ist der detaillierte Inhalt vonMiddlewares: Was sie sind und wie man sie in Nuxt.JS verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!