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)
Vom Backend zum Frontend: was für eine Tragödie. A...
Inhaltsverzeichnis Mixins-Implementierung Zusamme...
Mögliche Gründe: Der Hauptgrund, warum Seata MySQ...
Wenn Sie MySQL installieren, wird Ihnen ein erste...
Inhaltsverzeichnis 1. Nutzung 1. Grundlegende Ver...
1. Entpacken Sie das heruntergeladene MySQL-Kompr...
Inhaltsverzeichnis 1. Software- und Systemabbild ...
Inhaltsverzeichnis Klicken Sie zunächst auf das E...
1. Zweck Schreiben Sie lokal eine Flask-Anwendung...
Problem: vue-cil3 wird mit Warnungen ausgeführt, ...
11. Verwenden Sie JavaScript, um Seiteneffekte zu...
1. Überwachungsplanung Bevor Sie ein Überwachungs...
Wenn die Serverdaten nicht verschlüsselt und mit ...
Heute ist ein weiterer sehr praktischer Fall. All...
1. Nachfrage Ein Bild bewegt sich in einer Endlos...