Spezifischer Einsatz von Routing Guards in Vue

Funktion: Kontrollieren Sie die Berechtigungen der Route

Kategorien: Globaler Schutz, Exklusiver Schutz, Komponentenschutz

1. Globale Wache

1.1 Globaler Frontschutz

Wie der Name schon sagt, besteht die Hauptaufgabe des Pre-Guard darin, eine Reihe von Vorgängen basierend auf Ihrem Status auszuführen, bevor Sie die Route überspringen (der globale Pre-Guard wird ausgelöst, bevor die Route initialisiert und übersprungen wird).

Sie können router.beforeEach verwenden, um einen globalen Vorschutz zu registrieren (Each: each, d. h. er wird ausgelöst, wenn eine beliebige Route springt).

Jede Guard-Methode erhält drei Parameter:

to:Route : Das Routenobjekt, das im Begriff ist, das Ziel zu erreichen

von:Route : Die Route, die die aktuelle Navigation verlassen wird

next:function : Diese Methode muss aufgerufen werden, um diesen Hook aufzulösen. Der Ausführungseffekt hängt von den Aufrufparametern der nächsten Methode ab

1. next() : Gehe zum nächsten Hook in der Pipeline (zu). Wird der Hook ausgeführt, wird der Navigationszustand bestätigt.

2. next(false) : unterbricht die aktuelle Navigation. Wenn sich die URL des Browsers ändert (möglicherweise manuell durch den Benutzer oder durch Drücken der Zurück-Schaltfläche des Browsers), wird die Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

3.next('/") oder next({path:'/'}) : Springt zur gleichen Adresse. Die aktuelle Navigation wird unterbrochen und dann wird eine neue Navigation durchgeführt. Sie können jedes beliebige Objekt an next übergeben und es ermöglicht Ihnen, Optionen wie replace:true, name:'home' und beliebige Optionen in Router-Links an prop oder router.push zu setzen.

Stellen Sie sicher, dass die nächste Funktion in jedem Navigationsschutz genau einmal aufgerufen wird. Sie kann mehr als einmal vorkommen, aber nur, wenn sich alle Logikpfade nicht überschneiden. Andernfalls wird der Hook nie aufgelöst oder es tritt ein Fehler auf.

1.1.1 Verwendung

Sie können „Von“, „Bis“ und „Weiter“ ausdrucken, um zu sehen, welche Informationen gespeichert werden.

Beispiel

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Home aus '../views/Home.vue' importieren
Importieren Sie „Info“ aus „../views/About.vue“.
Nachrichten aus „../views/News.vue“ importieren
Nachricht aus '../views/Message.vue' importieren
 
Vue.use(VueRouter)
 
const Routen = [{
    Pfad: '/home',
    Name: "Home",
    Komponente: Home,
    Kinder:[
      {
        Pfad: 'Nachricht', //Nicht schreiben: /news
        Komponente: Nachricht
      }
    ]
  },
  {
    Pfad: '/about',
    Name: "AboutName",
    Komponente: Über,
    children: [{ //Konfiguriere das Child-Routing über den Children-Pfad: 'news', //Hier nicht schreiben: /news
      Komponente: Nachrichten
    }]
  }
]
 
const router = neuer VueRouter({
  Routen
})
 
//Globaler Front-Routing-Guard – wird bei der Initialisierung und bei jedem Routenwechsel aufgerufen router.beforeEach((to, from, next) => {
  konsole.log(zu);
  //Hier ist ein einfaches Beispiel //um festzustellen, ob der Benutzer eine Route eingegeben hat, die eine Authentifizierung erfordert (hier ist die Entfernung News und Message)
  wenn (zu.Pfad == '/home/message' || zu.Pfad === '/about/news') {
    //Wenn Sie eingeben, legen Sie fest, ob die Informationen lokal zwischengespeichert werden (hier wird der Anmeldetoken simuliert)
    wenn (localStorage.getItem('name') === 'haungzhizhen') {
      nächste()
    }
  }anders{
    //Wenn nicht, bleiben Sie unbesorgt und rufen Sie next() auf.
  }
})
Standardrouter exportieren

Ein Nachteil des obigen Beispiels besteht darin, dass Sie, wenn viele Routen authentifiziert werden müssen, diese nicht einzeln beurteilen müssen. Das ist nicht notwendig, deshalb wird hier ein weiteres Attribut der Route eingeführt, nämlich Meta, das in jeder Route konfiguriert werden kann. Es wird im Allgemeinen verwendet, um die Attribute mit Identifikation zu identifizieren, und kann wie folgt mit Kraft beurteilt werden:

//Meta verwenden
router.beforeEach((bis, von, weiter) => {
  konsole.log(zu);
  if (to.meta.isAuth) {//Beurteilen, ob eine Authentifizierung erforderlich istif (localStorage.getItem('name') === 'haungzhizhen') {
      nächste()
    }
  } anders {
    nächste()
  }
})

1.2 Globaler Post-Route-Schutz

//Globaler Post-Route-Guard --- wird während der Initialisierung und nach jedem Routenwechsel aufgerufen router.afterEach((to, from) => {
  wenn (zu.meta.title) {
    document.title = to.meta.title || 'Routing-Sprungbeispiel' //Ändern Sie den Titel der Webseite
  }anders{
    Dokument.Titel = "vue_test"
  }
})

1.3 Integration

2. Routerspezifischer Schutz

Sie können beforeEnter-Guards direkt in der Routenkonfiguration definieren. Diese Parameter sind dieselben wie die Methodenparameter des globalen before-Guards.

const router = neuer VueRouter({
  Routen: [
    {
      Pfad: '/foo',
      Komponente: Foo,
      beforeEnter: (bis, von, weiter) => {
        // ...
      }
    }
  ]
})

3. Schutzvorrichtungen innerhalb von Komponenten

Schließlich können Sie Routennavigationsschutzfunktionen direkt in Ihrer Routenkomponente definieren:

• vorRouterEnter
• vorRouterUpdate
• vorRouterLeave

const Foo = {
  Vorlage: `...`,
  vorRouteEnter(nach, von, weiter) {
    // Wird aufgerufen, bevor die entsprechende Route, die diese Komponente rendert, bestätigt wird. // Nein! fähig! Holen Sie sich die Komponenteninstanz `this`
    // Da die Komponenteninstanz nicht erstellt wurde, bevor der Guard ausgeführt wird},
  vorRouteUpdate(nach, von, weiter) {
    // Wird aufgerufen, wenn sich die aktuelle Route ändert, die Komponente aber wiederverwendet wird // Beispielsweise für einen Pfad /foo/:id mit dynamischen Parametern, wenn zwischen /foo/1 und /foo/2 gesprungen wird,
    // Da dieselbe Foo-Komponente gerendert wird, wird die Komponenteninstanz wiederverwendet. Und dieser Hook wird in diesem Fall aufgerufen.
    // Sie können auf die Komponenteninstanz `this` zugreifen
  },
  vorRouteAbfahren(nach, von, weiter) {
    // Wird aufgerufen, wenn von der entsprechenden Route dieser Komponente weg navigiert wird // Sie können auf die Komponenteninstanz `this` zugreifen
  }
}

Dies ist das Ende dieses Artikels über die spezifische Verwendung von Routing Guards in Vue. Weitere relevante Inhalte zu Vue Routing Guard 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!