Verwenden Sie beforeEach von vue-route, um die Navigationsschutzfunktion (Anmeldung vor Routing-Sprung überprüfen) zu implementieren

Eine solche Anforderung ist häufig auf Websites anzutreffen. Vor dem Weiterleiten von Sprüngen müssen einige Überprüfungen durchgeführt werden, z. B. die Anmeldebestätigung (gehen Sie zur Anmeldeseite, wenn Sie nicht angemeldet sind). Im Folgenden zeige ich Ihnen die Navigationsschutzfunktion (Anmeldung vor dem Routensprung überprüfen) mithilfe von vue-route. Interessierte Freunde sollten einen Blick darauf werfen

Führen Sie vor dem Routensprung eine Überprüfung durch, z. B. die Anmeldeauthentifizierung (gehen Sie zu Anmeldeseite ohne Anmeldung) ist eine häufige Anforderung auf Websites. In dieser Hinsicht kann das von vue-route bereitgestellte beforeRouteUpdate problemlos Navigationswächter (Navigationswächter) implementieren.

Der Name Navigationswächter klingt seltsam, aber da das offizielle Dokument ihn so übersetzt, nennen wir ihn so.

Lassen Sie uns zunächst einen Auszug aus der Verwendung von beforeRouteUpdate in einem Dokument erläutern:

Sie können router.beforeEach verwenden, um einen globalen Front Guard zu registrieren:

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

Wenn eine Navigation ausgelöst wird, wird der globale Frontschutz in der Reihenfolge der Erstellung aufgerufen. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Schutzmethode erhält drei Parameter:

zu: Route: das einzugebende Zielroutenobjekt

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

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

next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

next('/') oder next({ path: '/' }): Zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.

next(error): (2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an den von router.onError() registrierten Rückruf übergeben.

Stellen Sie sicher, dass Sie die nächste Methode aufrufen, sonst wird der Hook nicht aufgelöst.

Schreiben Sie unten ein Beispiel. Auf unserer Kontoseite, einschließlich Kursen und Bestellungen, müssen Sie vor dem Springen feststellen, ob Sie angemeldet sind . Springe zur Homepage:

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Diskussion von Problemen im Zusammenhang mit readyState und Status in Ajax

Umfassende Analyse von $.Ajax( ) Methodenparameter (grafisches Tutorial)

Datei-Upload mit Fortschrittsbalken basierend auf Ajax-Technologie

Das obige ist der detaillierte Inhalt vonVerwenden Sie beforeEach von vue-route, um die Navigationsschutzfunktion (Anmeldung vor Routing-Sprung überprüfen) zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!