Beispiel für eine Routing-Berechtigungsverwaltungsmethode in Vue2/vue3

1. Es gibt im Allgemeinen zwei Methoden zur Steuerung der Vue-Routing-Berechtigung

a. Routing-Metainformationen (Meta)
b. Menüs und Routen dynamisch laden (addRoutes)

2 Routing-Metainformationen (Meta) zur Steuerung der Routing-Berechtigungen

2.1 Implementierung in vue2

Wenn es auf einer Website unterschiedliche Rollen gibt, etwa Administratoren und normale Benutzer, sind für den Zugriff auf die verschiedenen Seiten unterschiedliche Rollen erforderlich.

Zu diesem Zeitpunkt können wir alle Seiten in die Routing-Tabelle einfügen und beim Zugriff darauf einfach die Rollenberechtigungen beurteilen. Wenn Sie die Berechtigung haben, erlauben Sie den Zugriff. Wenn Sie keine Berechtigung haben, verweigern Sie den Zugriff und springen Sie zur 404-Seite.

vue-router bietet beim Erstellen von Routen eine Metakonfigurationsschnittstelle. Wir können den Routen in den Metadaten entsprechende Berechtigungen hinzufügen und dann die entsprechenden Berechtigungen im Routenwächter überprüfen, um dessen Routensprung zu steuern.

Sie können den Rollen im Metaattribut jeder Route Rollen hinzufügen, die auf die Route zugreifen können. Nach der Anmeldung jedes Benutzers wird seine Rolle zurückgegeben. Beim Aufrufen der Seite wird dann das Metaattribut der Route mit der Rolle des Benutzers verglichen. Wenn die Rolle des Benutzers in den Rollen der Route enthalten ist, wird der Zugriff erlaubt. Wenn nicht, wird der Zugriff verweigert.

So implementiert Vue2 es:

importiere VueRouter von „vue-router“;
Vue.use(VueRouter)
...
Routen: [
  {
    Pfad: '/login',
    Name: 'Anmelden',
    Meta: {
      Rollen: ['Administrator', 'Benutzer']
    },
    Komponente: () => import('../Komponenten/Login.vue')
  },
  {
    Pfad: 'Home',
    Name: 'Heimat',
    Meta: {
      Rollen: ['admin']
    },
    Komponente: () => import('../views/Home.vue')
  },
]

const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

Führen Sie es in die Datei app.vue ein und registrieren Sie den globalen Routing-Guard

//Angenommen, es gibt zwei Rollen: Administrator und Benutzer 
//Benutzerrolle aus dem Hintergrund abgerufen const role = 'user'
//Beim Aufrufen einer Seite wird das Navigationswächterereignis router.beforeEach ausgelöst router.beforeEach((to,from,next)=>{
  wenn (to.meta.roles.includes(Rolle)) {
   nächste() // freigeben}esle{
   next({path:"/404"}) //zur 404-Seite springen}
})

Ab sofort ist die grundlegende Routing-Berechtigungskontrolle abgeschlossen

Abgesehen vom Thema kann der Route Guard auch die geschäftliche Anforderung erfüllen, 404-Seiten zu übertragen, wenn die Route nicht abgeglichen werden kann. Dies kann wie folgt erreicht werden:

Router aus „./router“ importieren
router.beforeEach((bis, von, weiter) => {
   // ...
    wenn (to.matched.length === 0) {
        weiter('/404')
    } anders {
        nächste()
    }
    //console.log(zu, von, weiter, „Route Guard“)
})

2.2 Implementierung in vue3

Tatsächlich sind die Ideen ähnlich, aber es sollte beachtet werden, dass sich die Art und Weise der Verwendung des Routings in Vue3 geringfügig von der in Vue2 unterscheidet. Ich verwende einen einfacheren 404, um eine Vue3-Instanz zu erstellen. Für die Routing-Berechtigungssteuerung von Vue3 können Sie Vue2 und dem folgenden Code folgen, um den Code wie folgt zu implementieren:

Erstellen Sie eine Route:

importiere { createRouter, createWebHashHistory } von „vue-router“;
...
Routen: [
  {
    Pfad: '/login',
    Name: 'Anmelden',
    Meta: {
      Rollen: ['Administrator', 'Benutzer']
    },
    Komponente: () => import('../Komponenten/Login.vue')
  },
  {
    Pfad: 'Home',
    Name: 'Heimat',
    Meta: {
      Rollen: ['admin']
    },
    Komponente: () => import('../views/Home.vue')
  },
]
const router = createRouter({
    Verlauf: createWebHashHistory(),
    Routen: Router
})
Standardrouter exportieren;

Routing Guard (global in App.vue registriert):

importieren {
    Router verwenden
} von „vue-router“;
Standard exportieren {
    Name: "App",
    aufstellen() {
        const router = useRouter();
        router.beforeEach((bis, von, weiter) => {
            // ...
            wenn (to.matched.length === 0) {
                weiter('/404')
            } anders {
                nächste()
            }
        })
    }
}

4. Menüs und Routen dynamisch laden (addRoutes)

Fügen Sie Menüs und Routing-Tabellen dynamisch entsprechend den Benutzerberechtigungen oder Benutzerattributen hinzu, um Benutzerfunktionen anzupassen. vue-router bietet die Methode addRoutes(), mit der Routen dynamisch registriert werden können. Es ist zu beachten, dass das dynamische Hinzufügen von Routen dazu dient, Routen in die Routing-Tabelle zu pushen. Da Routen der Reihe nach abgeglichen werden, müssen Routen wie 404-Seiten am Ende der dynamisch hinzugefügten platziert werden.

5. Zusammenfassung

Ob vue2 oder vue3, die Implementierungsideen sind eigentlich ähnlich, aber die Details der Verwendung der Schnittstelle werden etwas anders sein. Für uns darf der Schwerpunkt des Lernens nicht auf einem bestimmten Rahmen liegen, sondern darauf, unser eigenes Denken zu trainieren.

Dies ist das Ende dieses Artikels über die Verwaltung von Routingberechtigungen für Vue2/Vue3. Weitere relevante Inhalte zur Verwaltung von Routingberechtigungen für Vue 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!