1. Schauen Sie sich zunächst die Anforderungskonfigurationsdatei an. Sehen Sie sich die Methode axios.create an. baseURL ist die grundlegende Route baseURL:Prozess.env.VUE_APP_BASE_API, Pfad: src-utils-request.js 2. Schauen Sie sich dann service.interceptors.request.use an und legen Sie den Token-Anforderungsheader fest. Mein Backend ist in jwt integriert, daher lautet der Anforderungsheader Authentifizierung, wie in der Abbildung gezeigt config.headers['Authentifizierung'] = getToken() 3. Legen Sie Ihren eigenen Statuscode fest, siehe service.interceptors.response.use. Legen Sie ihn wie in der Abbildung gezeigt auf Ihren eigenen Statuscode fest Dies sind die Daten, auf die mein Server antwortet, wie folgt, 1 ist die normale Antwortdaten { "Code": 1, "Daten": { "Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBY2NvdW50SWQiOiJhZG1pbiIsIm5iZiI6MTYyNDE3NTM4MiwiZXhwIjoxNjI0MTc1NDQyLCJpYXQiOjE2MjQxNzUzODJ9.7p8EHMx1b4-yIMRN7Qxden3nZsDmBvevHEf-3oVhFMg", "message": "Anmeldung erfolgreich", "Zustand": wahr } } 4. Ändern Sie die API in .env.production und .env.development auf leer, und das Bild zeigt nur .env.production 5. Ändern Sie die grundlegende Routing-Konfiguration und fügen Sie nach devServer den folgenden Code hinzu (kommentieren Sie die Zeile davor aus, die zur Simulation von Daten verwendet wird und nicht benötigt wird), wie in der Abbildung gezeigt // vorher: require('./mock/mock-server.js') Proxy: { [Prozess.Umgebung.VUE_APP_BASE_API]: { Ziel: 'https://xiaoxingbobo.top', // Ziel: 'http://192.168.1.119:8081', // Ziel: 'http://192.168.1.253:8081', changeOrigin: wahr, PfadNeu schreiben: { ['^' + process.env.VUE_APP_BASE_API]: '' } } } Hier wird grundsätzlich das Basisrouting konfiguriert. 6. Suchen Sie in der Datei src-view-login-index.html die Anmeldeoberfläche von Vue-Element-Admin und fügen Sie den folgenden Code hinzu. Kommentieren Sie wie in der Abbildung gezeigt die offizielle Anforderungsmethode aus. this.loginForm ist der Anforderungsparameter dies.laden = wahr dies.$store.dispatch('Benutzer/Anmeldung', dies.Anmeldeform) .then(() => { dies.$router.push({ Pfad: diese.Umleitung || '/', Abfrage: diese.andereAbfrage }) dies.laden = falsch }) .catch((e) => { dieses.tool.log(e) dies.laden = falsch }) 7. Legen Sie den Sprung fest, nachdem sich der Benutzer erfolgreich angemeldet hat. Das Token muss nach der Anmeldung zwischengespeichert werden, da sonst die Anmeldeseite nicht springt In src-store-moduls-use.js, wie in der Abbildung gezeigt Suchen Sie unter Aktion die Login-Methode und ändern Sie den Code wie folgt const Aktionen = { // Benutzeranmeldung Login({ begehen }, Benutzerinfo) { Konstante { Konto-ID, Passwort } = Benutzerinfo returniere neues Promise((lösen, ablehnen) => { console.log('Benutzerinfo', Benutzerinfo) //Vom Server benötigte Anmeldeparameter const payload = { Konto-ID: Konto-ID, Passwort: Passwort } //Anforderungsserver user.login(payload).then(response => { Konstante { Daten } = Antwort console.log('Antwort', Antwort) commit('SET_TOKEN', Daten.Token) setToken(Daten.Token) lösen() }).fangen(Fehler => { ablehnen(Fehler) }) }) }, Suchen Sie die Methode getInfo und ändern Sie den Code wie folgt. Da die Schnittstelle zum Abrufen von Benutzerinformationen nicht geschrieben ist, sind die Daten direkt fest codiert. Nehmen Sie Anpassungen entsprechend Ihren eigenen Anforderungen vor. getInfo({ begehen, Zustand }) { returniere neues Promise((lösen, ablehnen) => { /** * Hier werden Benutzerinformationen und Berechtigungen abgefragt. Derzeit ist die Schnittstelle nicht implementiert, es werden nur Kommentare eingegeben und die Daten sind fest codiert* */ // Benutzer.getInfo(Status.Token).then(Antwort => { // konstant { // Daten // } = Antwort Konstante { Daten } = { Daten: { Rollen: ['admin'], Einführung: 'Administrator', Avatar: „https://cloud.xiaoxingbobo.top/nongzhibang/20210429/1107491622257669573“, Name: "Administrator" } } wenn (!data) { reject('Die Überprüfung ist fehlgeschlagen. Bitte melden Sie sich erneut an.') } Konstante { Rollen, Name, Benutzerbild, , Zeichen } = Daten // Rollen dürfen kein leeres Array sein if (!Rollen || Rollen.Länge <= 0) { reject('getInfo: Rollen müssen ein Array ungleich Null sein!') } commit('SET_ROLES', Rollen) commit('SET_NAME', Name) commit('SET_AVATAR', Avatar) commit('SET_INTRODUCTION', Einführung) Commit('SET_TOKEN', Token) auflösen (Daten) // }).catch(Fehler => { // ablehnen(Fehler) // }) }) }, Damit ist Vue-Element-Admin abgeschlossen und Sie können sich auf der Homepage anmelden Dies ist das Ende dieses Artikels über die Integration einer eigenen Schnittstelle von Vue-Element-Admin zur Realisierung des Login-Sprungs. Weitere relevante Inhalte zum Login-Sprung von Vue-Element-Admin 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! Das könnte Sie auch interessieren:
|
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 (Windows 10 x64)
Vorwort Dieser Artikel enthält eine Anleitung zum...
Grafisches Tutorial zur Installation und Konfigur...
MySQL ist eine kostenlose relationale Datenbank m...
Als ich heute die Anmeldeseite geschrieben habe, ...
1. Laden Sie das MySQL 5.7.11 Zip-Installationspa...
Beim Konfigurieren von web.xml für Tomcat ist Ser...
Dieser Artikel enthält das grafische Tutorial zur...
Jeder, der es braucht, kann darauf zurückgreifen....
1. „Get“ wird verwendet, um Daten vom Server abzu...
Installieren Sie CentOS 7 nach der Installation v...
Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...
MongoDB -Installation Wählen Sie die Installation...
Inhaltsverzeichnis Vorwort Warum Wie viel kostet ...
In diesem Artikelbeispiel wird der spezifische Co...
Inhaltsverzeichnis Ereignisschleife miscroTask (M...