So verwenden Sie Vue Guard

Vue ist ein beliebtes JavaScript-Framework, das viele Funktionen und Optionen bietet, um Entwicklern bei der Erstellung responsiver Webanwendungen zu helfen. Guard ist ein sehr wichtiges Konzept in Vue. In diesem Artikel werden die grundlegenden Verwendungszwecke und Fälle von Vue-Guards erläutert.

Vue Guard-Übersicht

In Vue ist ein Guard eine Funktion, die die Lebenszyklusereignisse von Routen und Komponenten überwachen kann. Wenn diese Ereignisse ausgelöst werden, können Wächter Aktionen wie die Überprüfung von Benutzerberechtigungen, das Kopieren und Überprüfen eingehender Daten usw. durchführen. Vue-Guards werden in zwei Kategorien unterteilt: Globale Guards und Routing-Guards. Der Hauptunterschied zwischen ihnen liegt in den Objekten, die sie überwachen.

Global Guards

Global Guards sind mit dem Lebenszyklus der Vue-Anwendung verbunden. Sie können einige Vorgänge ausführen, wenn jede Vue-Instanz erstellt, zerstört, aktualisiert oder gemountet wird. Globale Wächter umfassen die folgenden vier Hook-Funktionen:

1. beforeCreate: Wird aufgerufen, nachdem die Vue-Instanz initialisiert wurde, jedoch vor der Datenbeobachtung und der Ereignis-/Watcher-Ereigniskonfiguration. Diese Hook-Funktion ist ein guter Zeitpunkt, um Daten/Status auf Komponentenebene zu initialisieren.
2. created: Wird aufgerufen, nachdem die Vue-Instanz erstellt wurde. Zu diesem Zeitpunkt ist die Komponenteninstanz nicht im DOM gemountet. Sie können in dieser Hook-Funktion einige asynchrone Vorgänge ausführen, es wird jedoch nicht empfohlen, die Statusdaten der Komponente darin zu ändern.
3. beforeMount: Wird aufgerufen, bevor die Vue-Instanz in das DOM-Element eingebunden wird. Zu diesem Zeitpunkt wurde die Vorlage der Komponente in einen HTML-String kompiliert, aber noch nicht in das DOM eingefügt.
4. mount: Wird aufgerufen, nachdem die Vue-Instanz auf dem DOM-Element gemountet wurde. Sie können auf DOM-Elemente zugreifen und andere Vorgänge innerhalb dieser Hook-Funktion ausführen, z. B. das Initialisieren von Plug-Ins von Drittanbietern usw.

Route Guards

Route Guards sind Hook-Funktionen, die ausgelöst werden, wenn die Anwendung zu einer bestimmten Route navigiert. Sie können den Zugriffsverlauf von Routen überwachen, prüfen, ob der Benutzer die Berechtigung zum Zugriff auf eine bestimmte Route hat, das asynchrone Laden von Daten und andere Vorgänge verarbeiten. Die Routenwächter von Vue umfassen die folgenden sechs Hook-Funktionen:

1. beforeRouteEnter: Wird aufgerufen, bevor die Route in die Komponente eintritt. In dieser Hook-Funktion kann auf die Komponenteninstanz zugegriffen werden, auf die Zustandsdaten und Instanzmethoden innerhalb der Komponente kann jedoch nicht zugegriffen werden.
2. beforeRouteUpdate: Wird aufgerufen, wenn die Route aktualisiert wird. Wird im Allgemeinen zur Verarbeitung von Vorgängen wie dem asynchronen Laden von Daten verwendet.
3. beforeRouteLeave: Wird aufgerufen, wenn die Route die Komponente verlässt. Sie können Guards verwenden, um Benutzereingaben zu validieren oder Benutzer über nicht gespeicherte Änderungen zu informieren.
4. beforeEach: Wird vor dem Navigieren zu einer neuen Route aufgerufen. Mit dieser Hook-Funktion können Sie Benutzerberechtigungen überprüfen, das asynchrone Laden von Daten und andere Vorgänge durchführen.
5. afterEach: Wird aufgerufen, nachdem die Navigation abgeschlossen ist. Fehler, die während der Navigation auftreten, können in dieser Hook-Funktion behandelt werden.
6. onError: Wird aufgerufen, wenn ein Fehler in der Routennavigation vorliegt. Ausnahmen wie Anforderungsfehler und Netzwerkfehler können in dieser Hook-Funktion behandelt werden.

Verwendung von Vue-Guards

Vue-Guards sind in der tatsächlichen Entwicklung sehr wichtig. Sie können zur Handhabung der Geschäftslogik in verschiedenen Szenarien verwendet werden. Im Folgenden demonstrieren wir anhand eines Beispiels die grundlegende Verwendung von Vue-Guards.

Angenommen, es gibt eine Seite, für deren Zugriff sich der Benutzer anmelden muss. Wenn der Benutzer nicht angemeldet ist, muss er zur Anmeldeseite weitergeleitet werden. Wir können den beforeEach-Guard verwenden, um diese Funktionalität zu erreichen. Definieren Sie zunächst ein Routen-Array:

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  }
]

In der Routing-Konfiguration geben wir die /profile-Route an, für deren Zugriff eine Anmeldung erforderlich ist, und markieren sie durch Routing-Metainformationen als Authentifizierung erfordernd. Fügen Sie als Nächstes die Hook-Funktion „beforeEach“ in der Datei router.js hinzu:

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/login');   //如果需要登录并且用户未登录，则重定向到登录页面
  } else {
    next();   //否则允许导航到目标路由
  }
});

In der Hook-Funktion „beforeEach“ rufen wir zunächst das aktuelle Benutzerobjekt „currentUser“ ab und verwenden dann das Attribut „requiresAuth“, um zu bestimmen, ob für den Zugriff auf die Zielroute eine Anmeldung erforderlich ist. Wenn eine Anmeldung erforderlich ist und der aktuelle Benutzer nicht angemeldet ist, leiten Sie zur Anmeldeseite weiter. Andernfalls erlauben Sie die Navigation zur Zielroute (verwenden Sie die Methode next(), um die Navigation zu ermöglichen).

Fazit

Vue Guard ist ein sehr wichtiges Konzept im Vue-Framework. Es kann verwendet werden, um die Lebenszyklusereignisse von Routen und Komponenten abzuhören und einige Vorgänge auszuführen, wenn diese Ereignisse ausgelöst werden, z. B. das Überprüfen von Benutzerberechtigungen und das Kopieren und Überprüfung eingehender Daten usw. Dieser Artikel führt in die Grundkenntnisse globaler Guards und Routing Guards ein und bietet ein Beispiel zur Demonstration der grundlegenden Verwendung von Vue Guards. Er soll es Entwicklern ermöglichen, Vue Guards besser zu verstehen und zu verwenden und ihre Rolle in der tatsächlichen Entwicklung vollständig zu nutzen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue Guard. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!