Analyse des Hintergrundauthentifizierungsprozesses von Vue-Elementen

exportiere standardmäßig einen neuen Router({ 
Routen:
   {
		Pfad: '/login',
		Name:'Anmelden',
		Komponente: aa
	},
	{
		Pfad: '/home',
		Name: 'Heimat',
		Komponente:cc
	},
	]
})

Vue von „vue“ importieren
Router von „vue-router“ importieren

Vue.use(Router)

export const defaultRoute = [ //Array von festen Teilberechtigungen, Routen für alle Benutzer zugänglich {
		Pfad: '/login',
		Komponente: aa
	},
]

export const asyncRoute = [ //Dynamisch konfigurierte Routing-Tabelle, muss vor der Verarbeitung gefiltert werden {
		Pfad: '/Bestellung',
		Name: 'Bestellung',
		Komponente: aa,
		Meta:{
			System: 'Bestellung'
		}
	}
	{
		Pfad: '/Rollen',
		Name: 'Rollen',
		Komponente: aa,
		Meta:{
			System: 'Rollen'
		}
	}
]

//Routing-Tabelle registrieren const createRouter = () => new Router({
	  // Modus: „Verlauf“, // Serviceunterstützung erforderlich
	  scrollBehavior: () => ({ y: 0 }),
	  Routen: konstanteRouten
})
const router = createRouter()

//Setze das Routing-Arbeitsblatt zurück. Diese Methode muss beim Abmelden aufgerufen werden. export function resetRouter() {
  const neuerRouter = createRouter()
  router.matcher = neuerRouter.matcher 
}

Standardrouter exportieren

Router aus „./router“ importieren
Store aus „./store“ importieren
import { getToken } from '@/utils/auth' // Benutzerdefinierte Kapselungsmethode für den Zugriff auf Token Route.beforeEach((to,from,next) =>{
	//Holen Sie sich das Token, um festzustellen, ob der Benutzer angemeldet ist const hasToken = getToken() 
	wenn (hatToken) {
	//Beurteilen, ob sich der Benutzer angemeldet hat if (to.path === "/login") {
			/**
			*Der Benutzer hat sich angemeldet, wird aber immer noch auf die Anmeldeseite umgeleitet. Dies bedeutet, dass der Benutzer den Abmeldevorgang durchgeführt hat. Hier kann also das Token gelöscht oder eine benutzerdefinierte Logik geschrieben werden. */
			nächste()
		}anders{
		/**
		*Hier ist der Fall, dass sich der Benutzer angemeldet oder auf die Anmeldeschaltfläche geklickt hat. Das Token wurde im lokalen Speicher gespeichert, wird aber nicht zur Anmeldung weitergeleitet. Wenn es keine Route zu /login gibt, lassen Sie es einfach los. Hier behandle ich einige Dinge, d. h., da sich der Benutzer angemeldet hat und direkt freigegeben werden kann, müssen wir vor der Freigabe hier einige logische Schritte ausführen, d. h. die Berechtigungen des Benutzers beurteilen und dann die Routen in unserer dynamisch konfigurierten Routing-Tabelle herausfiltern, die seinen Berechtigungen basierend auf den Berechtigungen des Benutzers entsprechen, und sie dann zur Verwendung in die Routing-Konfigurationstabelle einfügen. *
		* Dann sind zwei Probleme damit verbunden:
		*1: Wann soll die dynamische Weiterleitung verarbeitet werden (nach der Anmeldung, vor dem Aufrufen der Homepage, also vor *nächster)
		*2: Welche Bedingungen handhaben dynamisches Routing */
		
		/**
		*Hier können Sie zunächst prüfen, ob die Länge der Benutzerberechtigungsliste im Store 0 beträgt. Wenn die Länge 0 beträgt, bedeutet dies, dass der Benutzer * gerade auf die Anmeldeschaltfläche geklickt hat, die Seite jedoch nicht aufgerufen hat. Zu diesem Zeitpunkt müssen Sie eine Berechtigungsfilterung durchführen.	
		*Wenn die Länge nicht 0 ist, bedeutet dies, dass der Authentifizierungsprozess in Ordnung ist. Gehen Sie einfach direkt zur entsprechenden Komponente. *Dieser Schritt dient hauptsächlich dazu, wiederholtes Filtern des Arrays zu verhindern und Leistung zu sparen. */
			wenn (store.getters.roles.length > 0) {
				nächste()
			}anders{
				//Wenn der Code diesen Punkt erreicht, bedeutet dies, dass der Benutzer angemeldet ist. Und der Authentifizierungsprozess wurde noch nicht gestartet.
				//Dann müssen Sie hier den Authentifizierungsprozess durchlaufen store.dispatch('getRoles').then(res=>{
					//Die Res ist hier die Auflösung im Peomise im dritten Schritt //welches das Array mit den Berechtigungsinformationen ist store.dispatch('createRouters',res.data)
					.dann(res=>{
						//Dies ist die Funktion, die den Store aufruft, um dynamische Routen zu erstellen. Sie können das //Berechtigungsarray an diese Funktion oder hier übergeben. //Diese Funktion ruft auf die gleiche Weise direkt den Wert der Rollen in Ihrem Status ab. let addRouters = store.getters('addRouters')
						let alleRouter = store.getters('alleRouter')

						//Fügen Sie den dynamischen Routing-Teil zur Arbeitsroute hinzu router.addRoutes(accessRoutes)
						//Zur abgefangenen Seite gehen next({ ...to, replace: true })
					})	
				})
			}
		}
	} anders {
		/**Hier wird die Situation behandelt, in der kein Token vorhanden ist, d. h. der Benutzer hat sich zu diesem Zeitpunkt nicht angemeldet. Wenn kein Benutzer angemeldet ist, bestimmen Sie, ob der Benutzer zur Anmeldeseite geht. Wenn es die Anmeldeseite ist, lassen Sie ihn direkt gehen. Wenn der Benutzer die Homepage besuchen möchte, ohne sich anzumelden, lassen Sie ihn auf die Anmeldeseite umleiten.
		wenn (zu.Pfad == '/login') {
			// Dieser Ort kann genauer beurteilt werden. Es ist nicht notwendig, ihn direkt beim Anmelden gehen zu lassen, aber // Wenn Sie zu allen öffentlichen Komponenten gehen, lassen Sie ihn direkt weitergehen ()
		}anders{
			weiter('/Anmelden')
		}
	}
}) 

//Definieren Sie eine Schnittstelle zum Abrufen der Benutzerberechtigungen im API-Ordner und rufen Sie sie in diesen Aktionen auf: import { getUserRole } from "../api/getRoles" //Schnittstelle zum Abrufen von Berechtigungen import { logout } from '../api/user' //Schnittstelle zum Abmelden des Benutzers import { resetRouter } from './router'
importiere { removeToken } von '@/utils/auth' // Benutzerdefinierte Kapselungsmethode zum Löschen des Tokens //Dies ist eine Methode zum Filtern von Arrays. Wenn die Routing-Tabelle in mehreren Ebenen verschachtelt ist, können Sie diese Methode rekursiv aufrufen, um das Array zu filtern //function hasPermission(roles, route) {
// wenn (route.meta && route.meta.roles) {
// returniere roles.some(role => route.meta.roles.includes(role))
// } anders {
// gibt true zurück
// }
//}

//Exportfunktion filterAsyncRoutes(Routen, Rollen) {
// const res = []

// Routen.fürJedes(Route => {
// const tmp = { ...route }
// wenn (hasPermission(roles, tmp)) {
// wenn (tmp.Kinder) {
// tmp.children = filterAsyncRoutes(tmp.children, Rollen)
// }
// res.push(tmp)
// }
// })
//
// Rückgabewert
//}

//Standardrouting und dynamisches Routing einführen import { defaultRoute , asyncRouter } from '@/router'
konstanter Zustand = {
	Rollen: [] // Die von der Schnittstelle erhaltene Berechtigungsliste, vorausgesetzt, das Datenformat ist: ["Reihenfolge", "Rollen"],
	allRouters: [], //Dies ist die endgültige Arbeitsroute nach der gesamten Integration addRouters: [], //Dies ist die Route, die entsprechend der dynamischen Berechtigungsübereinstimmung herausgefiltert wird}
	  
const getter = {
	/**Speichern Sie die Rollen im Status in diesem Getter und rufen Sie dann die Rollen an anderen Stellen in diesem Getter ab. Wenn sich die ursprünglichen Rollen ändern, ändern sich auch die Rollen an anderen Stellen, was berechneten Eigenschaften entspricht */
	Rollen:Zustand => Zustand.Rollen
	alleRouter:Zustand => Zustand.alleRouter
	addRouters:state => zustand.addRouters
}
const-Mutationen: {
	/**Senden Sie in den folgenden Aktionen das Array mit den Berechtigungsinformationen per Commit an diese Stelle. Anschließend *sendet diese Stelle das Array an die Statusrollen.
	*/
	SetRoute(Status, Router)
		//Der Router ist hier die nach Benutzerberechtigungen gefilterte Routing-Tabelle state.allRouters = defaultRoute.concat(router)
		state.addRouters = Router
	}
	//Speichern Sie das Routing-Berechtigungs-Array im Status
	setRoles(Status,Wert){
		Status.Rollen = Wert
	}
}
const-Aktionen: {
	//Schreiben Sie eine Anfrage, um die Berechtigungen der aktuell angemeldeten Rolle zu erhalten, z. B. ["/order","roles"]. Wenn die Anfrage // so zurückkommt, bedeutet dies, dass die Berechtigungen dieser Rolle darin bestehen, auf die Bestellroute und //Rollenroute zuzugreifen	
	// Es gibt zwei mögliche Situationen zum Abrufen von Berechtigungsinformationen: mit Ausnahme der folgenden Berechtigungsinformationen, bei denen es sich um eine separate Schnittstelle handelt.
	//Berechtigungsinformationen können auch zusammen mit der Benutzeranmeldeschnittstelle zurückgegeben werden //Holen Sie sich die Berechtigungsinformationen des aktuellen Benutzers und speichern Sie sie im Status. Diese Berechtigungsinformationen können mit dem Backend // kommuniziert werden. Sie werden nicht als separate Schnittstelle geschrieben, die Sie anfordern können. Stattdessen werden Ihnen beim Anmelden die Benutzerinformationen und die Berechtigungsinformationen des Benutzers auf einmal zurückgegeben. Wenn sich der Benutzer dann anmeldet, werden die Berechtigungsinformationen im Status gespeichert. //Der Zweck besteht darin, das Array der Berechtigungsinformationen im Status zu speichern. //Rollenberechtigungsmethode abrufen getRoles({commit},data){
		returniere neues Promise(lösen,ablehnen){
			//Aufruf zum Abrufen der Benutzerrechte-Schnittstelle getUserRole().then(res =>{
				//Die hier zurückgegebenen Daten sollten ein Array mit Berechtigungsinformationen sein, wie etwa: ["order", "roles"]
				//Speichern Sie die Berechtigungsinformationen durch Mutationen im Status
				commit('Rollen festlegen',res.data)
				auflösen(res.data)
			})
		}
	})
	//Methode zum Filtern der Array-Konfigurationstabelle basierend auf Berechtigungen createRouters({ commit } , data ){
		returniere neues Promise((lösen,ablehnen) => {
			let addRouters = [ ] 
			wenn (data.includes("admin") {
				addRouters = asyncRouter
			}anders{
				// Bei der Projektentwicklung kann das Routing-Array in mehreren Ebenen verschachtelt sein, daher muss an dieser Stelle die oben beschriebene benutzerdefinierte Methode verwendet werden	
				//Methode zum rekursiven Filtern, diese Demo verarbeitet nur eine Ebene des Arrays //(filterAsyncRoutes) method addRouters = asyncRouter.filter(item=>{
					wenn (Daten.enthält(Element.Meta.System)) {
					   	Rücksendeartikel
					}
				})
			}
			
			
			//Übergeben Sie die passende Berechtigungsroute an Mutationen und lassen Sie Mutationen
			//Speichern Sie die übereinstimmende Route im Status
			commit.("Route festlegen",Router hinzufügen)
			resolve() //Hier müssen Sie resolve aufrufen, damit Außenstehende den Rückruf der erfolgreichen Array-Filterung durch //.then }) erhalten können.
	},
	Abmelden({ Commit }) {
	    returniere neues Promise((lösen, ablehnen) => {
	      abmelden().dann(() => {
	        removeToken() // muss zuerst das Token entfernen
	        Router zurücksetzen()
	        commit('Rollen festlegen', [])
	        commit('Route festlegen', [])
	        lösen()
	      }).fangen(Fehler => {
	        ablehnen(Fehler)
	      })
	    })
  },
}
Standard exportieren {
	Zustand,
	Getter,
	Mutationen,
	Aktionen
}

asynchrone Funktion logout(){
	versuchen{
		const res = warte auf store.dispatch.logout()
		wenn(res.code == 200){
			//Abmeldung erfolgreich }
	}fangen{
		//Abmeldung fehlgeschlagen (Fehler)
	}
}