Inhaltsverzeichnis
Was ist die Designidee für RBAC-Berechtigungen?
Berechtigungsimplementierungsprozess auf Seitenebene
1 Richten Sie Routingrouter/index.js ein
2 Berechtigungsdatenfilter abrufen, um eine dynamische Routing-Tabelle zu erhalten
3 Die dynamische Routing-Tabelle lädt den Router und rendert das linke Menü
Vorderseite
Sie müssen die Grundvoraussetzungen für das Zuweisen von Rollen zu Benutzern und das Zuweisen von Berechtigungen zu Rollen erfüllen, und Sie können die Berechtigungsinformationen des Benutzers aus dem Backend/Mock abrufen.
Was ist die Designidee für RBAC-Berechtigungen?
Laienhaft ausgedrückt, wenn Sie ein professioneller Schachspieler sind ( Rolle ), dann können Sie in die Chinese Chess Academy ( Autorität ) eintreten, obwohl Ihr Freund Ihr Freund ist ( Rolle ), aber er ist kein professioneller Schachspieler, die Chinese Chess Academy lässt Außenstehende nicht rein, er darf nicht rein ( Erlaubnis )
Eines Tages wird Ihr Freund verrückt werden, 24 Stunden am Tag Überstunden machen, eine professionelle Schachspieler-Zertifizierung erhalten ( Rolle ) und jetzt kann er die chinesische Schachakademie betreten ( Erlaubnis ).
Kurz gesagt, ist es zu mühsam, wenn ich Mitarbeitern nacheinander Berechtigungen hinzufüge?Oft haben Unternehmen eine Reihe von Regeln, Rolle a hat Berechtigungen vom Typ a, Rolle b hat Berechtigungen von b, ich möchte neuen Mitarbeitern Berechtigungen direkt hinzufügen Laut Chef geben Sie ihm einfach eine Rolle
Eine Rolle ist eine Sammlung von Berechtigungen
Berechtigungsimplementierungsprozess auf Seitenebene
analysieren
Zunächst einmal gibt es im Routing-Wächter nach dem Anmelden ein Token, geben Sie das Else ein, um vuex-Aktionen zu übermitteln, um asynchron userInfo zu erhalten, und der Rückgabewert von vuex enthält Berechtigungsdaten
1 Richten Sie Routingrouter/index.js ein
Zunächst einmal wissen wir, dass die Seitenautorität mit dem Routing-Router zusammenhängt und die Routing-Tabelle der Schlüssel ist, um zu steuern, ob er zu der entsprechenden Seitenkomponente springen kann.Daher müssen wir diese 8 dynamischen Routen entsprechend dynamisch setzen die Menüeinstellung
router/index.js
Wie Sie sehen können, haben wir es hier tot geschrieben, damit jeder unserer Benutzer auf jede Seite zugreifen kann, hier löschen wir direkt ... asyncRoutes
2 Berechtigungsdatenfilter abrufen, um eine dynamische Routing-Tabelle zu erhalten
Als nächstes müssen wir die Verbindung zwischen den vom Backend zurückgegebenen Menüs und der dynamischen Routing-Tabelle herstellen.Denken Sie an die Stelle, an der wir zuerst die menus erhalten , nämlich die Actions-Anfrage userInfo, die vom Permission Routing Guard übermittelt wird, der die menus enthält . Und der Versand gibt ein Promise-Objekt zurück, sodass wir diesen Wert im Route Guard erwarten können
Erweiterung: Das Rückgabeversprechen-Objekt auf der offiziellen vuex-Website => Aktionen hat den erforderlichen Wert. Sie können den erforderlichen Wert hier auch direkt zurückgeben . Weil dies auf der offiziellen vuex-Website steht首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
Rückgabewert in vuex
Rufen Sie den Wert im Routing Guard ab
Print kann die frühesten Menüs im Routing Guard abrufen
Als nächstes müssen wir hier die geschriebene dynamische Routing-Tabelle nehmen und sie nach Menüs filtern, um eine neue Routing-Tabelle zu erhalten
Jedes meiner dynamischen Routing-Objekte ist so. Sie können sehen, dass Sie das Pfadattribut verwenden können, um die Zeichenfolge nach 2 Ziffern zu filtern, oder Sie können direkt den Namen verwenden. Ich verwende den Pfad, um zu urteilen
Streckenwächter
const { menus } = await store.dispatch('user/getInfo')
const filterAsyncRoutes = asyncRoutes.filter(item => menus.includes(item.path.slice(1)))
Die dynamische Routing-Tabelle nach Erhalt der Filterautorität
3 Die dynamische Routing-Tabelle lädt den Router und rendert das linke Menü
Im Routing-Wächter wurde eine neue dynamische Routing-Tabelle erhalten, und als Nächstes sind zwei Dinge zu tun
- auf Router laden
- Spleißen von dynamischem Routing und statischem Routing, Rendern des linken Menüs
Ich verwende vuex, um hier dynamische und statische Routen zu speichern und sie dann in den Router zu laden, da das Menü auf der linken Seite andere Komponenten enthält und gemäß der Routingtabelle gerendert wird und komponentenübergreifend verwendet werden kann direkt einzureichen, nachdem die obigen Routing-Wächter die erforderlichen Daten erhalten haben. Mutationen, statische Routing-Tabelle wird in vuex importiert, und statische und gefilterte dynamische Routing-Tabellen werden in Mutationen gespleißt, um die endgültigen totalRoutes zu generieren
Nachdem der Routenwächter den obigen Wert erhalten hat, laden Sie die dynamische Route sofort in den Router. addRoutes-Methode
const { menus } = await store.dispatch('user/getInfo')
const filterAsyncRoutes = asyncRoutes.filter(item => menus.includes(item.path.slice(1)))
router.addRoutes(filterAsyncRoutes)
store.commit('menu/loadRoute', filterAsyncRoutes)Der Vuex-Code-Routing-Wächter übermittelt Mutationen, übergibt die gefilterte dynamische Routing-Tabelle an die statische Routing-Tabelle und synthetisiert die endgültige Routing-Tabelle, um das linke Menü wiederzugeben
Analysieren Sie die linke Menülogik
index.vue der Siderbar-Komponente
Ursprünglich ist this.$router.options.routes die Routing-Tabelle, die wir in router/index.js konfiguriert haben, und die Routing-Tabelle, die wir dynamisch hinzugefügt haben, wird nicht automatisch auf die Routing-Tabelle aktualisiert, this.$router.options.routes ist es um die Routing-Regeln während der Initialisierung zu konfigurieren, deshalb möchte ich es selbst in vuex speichern. Dies ist auch absichtlich von Vue entworfen. Der Autor hat einmal in Frage geantwortet:options is the object passed to the vuerouter constructor. It's not modified afterwards.
Der Autor empfiehlt jedoch nicht, die obige Methode zu verwenden. Es ist am besten, sie in vuex zu speichern
Dann erhält der Änderungscode für die linke Menüeinstellung unsere dynamisch festgelegte Routing-Tabelle von vuex
Das linke Menü wird gerendert
4 Fehler behoben
bug1: Aktualisiere 404
Auf der dynamischen Routing-Seite, wie z. B. der Organisationsstruktur der Abteilung oben, können wir normalerweise darauf zugreifen, aber solange wir sie aktualisieren, werden wir ein 404-Problem finden
Da die letzte Regel unserer statischen Routing-Tabelle *Platzhalter für 404 ist, muss das dynamische Routing beim Aktualisieren erneut auf der Routing-Instanz bereitgestellt werden, aber es wird durch den Platzhalter für die 404-Seite abgefangen, bevor es bereitgestellt wird
Lösung: 404 wird aus der statischen Routing-Tabelle gelöscht und am Ende der gefilterten dynamischen Routing-Tabelle hinzugefügt, d. h. in die 404-Regel eingefügt
bug2: Leerzeichen aktualisieren/Seite wird nicht ohne Fehler geladen
Hey, Fehler 1 wurde behoben. Hast du einen anderen Fehler gefunden? Beim Aktualisieren der Seite wird nicht geladen, es wird kein Fehler gemeldet und sie ist leer
Warum ist das?Ich habe mich gefragt, als ich es zum ersten Mal gesehen habe.Später, nachdem ich die Informationen konsultiert habe, ist der wahrscheinliche Grund, dass wir Routes in der Wache hinzugefügt und next() ausgeführt haben, bevor die Ausführung beendet wurde, also müssen wir a hinzufügen next (to.path) Betreten Sie die Wache einmal erneut, und die dynamische Route wurde zu diesem Zeitpunkt hinzugefügt
bug3: Nach dem Abmelden und erneuten Anmelden fügt die Konsole wiederholt Routeninformationen hinzu, und solange das Konto ohne Erlaubnis die Seite nicht aktualisiert, können Sie die Adresse über die Adressleiste eingeben, um ohne Erlaubnis auf die ursprüngliche Adresse zuzugreifen
Da wir die Route beim Abmelden nicht zurückgesetzt haben, ist die schwerwiegendste Sache hier die Berechtigungsverwirrung, da die vorherigen Informationen zum dynamischen Routing des Benutzers nicht gelöscht wurden, was zu einem Berechtigungsverlust führt. Setzen Sie die Route also beim Abmelden zurück
Im Allgemeinen müssen drei Stellen eingestellt werden
// router/index.js 定义重置路由方法
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
// vuex登出actions中 最后重置路由
// 以及一切你知道的问题处 比如token失效时一般我们放到request拦截器里面处理
import { resetRouter } from '@/router'
logout(context) {
context.commit('updateToken', '')
context.commit('setUserInfo', {})
resetRouter()
}
// 我的拦截器中设置当401 status时 提交actions 登出 所以我只用设置上面vuex那段
// 响应拦截器
async error => {
// console.log('响应拦截器error')
if (error.response.status === 401) {
await store.dispatch('user/logout')
router.push(`/login?redirect=${router.currentRoute.fullPath}`)
}
Message.error(error.response.data.message)
return Promise.reject(error)
}
Bug4: Da wir uns abgemeldet haben oder das Token abläuft, fügt es automatisch die Pfadinformationen der ursprünglichen Webseitenadresse zur Adressleiste hinzu. Wenn wir uns abmelden und bei einem Benutzer anmelden, der nicht über die Berechtigung der ursprünglichen Webseite verfügt, 404 wird als nächstes angezeigt (zu Pfad) Fügen Sie ein Urteil hinzu, wenn es nicht in den Menüs steht, springen Sie direkt zur Startseite
menus.includes(to.path.substring(1)) ? next(to.path) : next('/')menus: Das vom Backend zurückgegebene Berechtigungs-Array-Element ist die Seiten-ID
An diesem Punkt ist im Grunde die Seitenautoritätsverwaltung im Grunde erledigt, hast du gelernt zu verschwenden ...