Routing-Berechtigungsverwaltung von Vue

Dieses Mal werde ich Ihnen das RoutingBerechtigungsmanagement von Vue vorstellen gemeinsam einen Blick werfen. Schauen Sie mal rein. Vorwort

Ich habe in den letzten Tagen mehrere verwandte Artikel gesehen, und gestern wurde es erneut erwähnt Deshalb habe ich einfach einige meiner Meinungen zusammengestellt, in der Hoffnung, dass sie für alle hilfreich sind.

Implementierung

Im Allgemeinen ist die Idee der Implementierung sehr einfach. Zunächst das Bild oben:

Es ist nichts anderes als Routing. Die Konfiguration ist je nach Benutzertyp in Benutzerrouting und Basisrouting unterteilt. Verschiedene Benutzertypen können unterschiedliche Benutzerroutings haben, die vom tatsächlichen Unternehmen abhängen.

Benutzerrouten: Routen, die nur für den aktuellen Benutzer gelten

1. Basisrouten: Routen, die für alle Benutzer zugänglich sind

2. Es gibt zwei Möglichkeiten, die Kontrolle zu erreichen:

Injizieren über die Vue-Router-AddRoutes-

-Methode

Route zur Erlangung der Kontrolle

Routensprünge durch Vue-Router vor jedem Haken einschränkenaddRoutes-Methode:

Erhalten Sie die aktuelle Benutzer-Routing-Konfiguration, indem Sie den Server anfordern und sie in das vom Vue-Router unterstützte Grundformat kodieren (die spezifische Kodierung hängt vom Datenformat ab, das vom Front- und Back-End ausgehandelt wird). Durch Aufrufen der Methode this.$router.addRoutes werden die codierten Benutzerrouten in die vorhandene Vue-Router-Instanz eingefügt, um das Benutzerrouting zu implementieren.

beforeEach-Methode

Ruft die aktuelle Benutzer-Routing-Konfiguration ab, indem sie den Server anfordert, und verwaltet jeden Sprung der Route durch Registrieren des router.beforeEach-Hooks. Jeder Sprung wird überprüft wird nicht mehr in der Basisroute und der Benutzerroute des aktuellen Benutzers gespeichert. Der Sprung wird abgebrochen und die Sprungfehlerseite wird umgeleitet.

Beide oben genannten Methoden erfordern die Konfiguration einer Fehlerseite im Vue-Router, um sicherzustellen, dass Benutzer unzureichende Berechtigungen wahrnehmen.

Die Prinzipien beider Methoden sind eigentlich die gleichen, außer dass die addRoutes-Methode dem Vue-Router durch Einfügen der Routing-Konfiguration mitteilt: „Derzeit haben wir nur diese Routen und wir kennen keine anderen

Routing-Adressen.“

„Erkennen“, während beforeEach sich mehr darauf verlässt, dass wir dem Vue-Router manuell dabei helfen, zu erkennen, auf welche Seiten zugegriffen werden kann und auf welche nicht. Um es ganz klar auszudrücken: Es ist der Unterschied zwischen automatisch und manuell. Apropos, jeder wird wahrscheinlich denken, dass addRoutes am bequemsten und schnellsten sein muss, da es automatisch ist, und es kann auch den Geschäftscode vereinfachen. Der Autor hat das am Anfang gedacht, aber! Viele Leute haben einen Punkt übersehen:

Die addRoutes-Methode hilft Ihnen nur dabei, neue Routen einzufügen, hilft Ihnen jedoch nicht dabei, andere Routen zu eliminieren!

Stellen Sie sich eine Situation vor, in der sich der Benutzer beim Administratorkonto auf seinem Computer anmeldet. Zu diesem Zeitpunkt wird die Route des Administrators in das Routing eingefügt, und der Benutzer meldet sich dann ab und behält die Seite bei Aktualisieren und zu einem normalen Benutzer wechseln. Zu diesem Zeitpunkt werden die Routen für normale Benutzer in das Routing eingefügt Ohne es zu wissen, können normale Benutzer auch durch Ändern der URL auf die Administratorseite zugreifen!

Es gibt auch eine Lösung für dieses Problem:

Indem Sie einen neuen Router erstellen und dann den neuen Router.matcher dem Verwaltungs-Router der aktuellen Seite zuweisen, um die Route zu aktualisieren Konfigurationszweck.

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
 mode: 'history',
 routes: []
})
const router = createRouter()
export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

Der Autor hat eine kleine Demo für Sie erstellt.

Bezüglich der oben genannten Probleme gab es Diskussionen unter den Github-Problemen von Vue-Router, die lauten:

Option zum Zurücksetzen/

Löschen hinzufügen

Routen #1436

Funktionsanforderung: Routen dynamisch ersetzen #1234

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So beheben Sie Dateifehler nach der AngularJS-Komprimierung

So verwenden Sie Axios für die domänenübergreifende Verarbeitung in Vue

Das obige ist der detaillierte Inhalt vonRouting-Berechtigungsverwaltung von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!