Middlewares: Was sie sind und wie man sie in Nuxt.JS verwendet

Was sind Middlewares?

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 :

• Authentifizierung: prüft, ob der Benutzer angemeldet ist, andernfalls wird er zum Anmeldebildschirm weitergeleitet.
• Berechtigung: Prüft, ob der Benutzer die Berechtigung zum Zugriff auf diese Seite hat. Wenn nicht, wird er zu einer Seite weitergeleitet, die über die Berechtigung verfügt.
• Protokolle: Informationen über Seiteninformationen speichern.

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.

Middleware auf nicht ganz so technische Weise

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.

1. 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.

2. 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.

3. 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.

Arten von Middleware

In Nuxt.js haben wir die folgenden Arten von Middleware:

• Global
• Inline oder Anonym
• Nominierte

1. Globale Middlewares werden im Ordner /middleware erstellt und auf allen Seiten ausgeführt. Sie müssen das globale Suffix hinzufügen.

/*
  Exemplo de middleware Global:
  Esse middleware verifica se a URL/rota buscada existe.
  Caso não exista o usuário é redirecionado para página de links.

  Nome e Diretório do arquivo:
  /middleware/notFound.global.js
*/

export default defineNuxtRouteMiddleware((to) => {
  const hasFoundRoute = to.matched.length > 0;

  if (!hasFoundRoute) {
    return navigateTo({
      path: "/links"
    });
  }
});

1. Inline- oder anonyme Middleware ist seitenspezifische Middleware, die direkt in der Seitendatei in Nuxt definiert wird; Dadurch wird die Wiederverwendung von Code eingeschränkt, da er nicht einfach mit anderen Seiten geteilt werden kann.

/*
  Exemplo de middleware inline:
  Esse middleware verifica se os dados estão presentes na store.
  Caso não esteja, os dados serão requisitados.
*/

<script setup lang="ts">
import { useStore } from 'vuex';

definePageMeta({
  middleware: [
    async function (to, from) {
      const store = useStore();
      if (!store.state.user) {
        await store.dispatch("fetchUser");
      }
    },
  ],
});
</script>

1. Benannte Middlewares werden im Ordner /middleware erstellt.

/*
  Exemplo de middleware Nomeado:
  Esse middleware verifica o usuário está logado.
  Caso não esteja logado, ele é redirecionado para página de login.

  Nome e Diretório do arquivo:
  /middleware/auth.js
*/

export default defineNuxtRouteMiddleware((to, from) => {
  const { $store } = useNuxtApp();

  if (!$store.auth?.loggedIn) {
    return navigateTo("/login");
  }
});

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:

<script setup>
definePageMeta({
  middleware: "auth-admin"
});
</script>

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.

Abschluss

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!