Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren

Vue-Element-Admin integriert eine eigene Schnittstelle, um den Login-Sprung zu realisieren

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:
  • So legen Sie die Standardsprache in vue-element-admin fest
  • So konvertieren Sie vue-element-admin ins Chinesische
  • Implementierungsschritte von vue-element-admin zum Erstellen eines Backend-Verwaltungssystems
  • vue-element-admin global laden warten
  • Vue-Element-Admin-Login, vollständige Prozessfreigabe

<<:  Lösen Sie das Problem des Importierens von Webprojekten in Idea und deren Veröffentlichung in Tomcat

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 (Windows 10 x64)

Artikel empfehlen

So löschen und deinstallieren Sie MySQL in Windows 10 vollständig

Vorwort Dieser Artikel enthält eine Anleitung zum...

Zusammenfassung des MySQL-Installationsdiagramms

Grafisches Tutorial zur Installation und Konfigur...

MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen

MySQL ist eine kostenlose relationale Datenbank m...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.11 Zip

1. Laden Sie das MySQL 5.7.11 Zip-Installationspa...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

Dieser Artikel enthält das grafische Tutorial zur...

GET POST Unterschiede

1. „Get“ wird verwendet, um Daten vom Server abzu...

Vue implementiert dynamische Routingdetails

Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...

Installations- und Konfigurationstutorial von MongoDB unter Linux

MongoDB -Installation Wählen Sie die Installation...

Wie lang ist eine Funktion in js?

Inhaltsverzeichnis Vorwort Warum Wie viel kostet ...

Analyse des Prinzips von Vue nextTick

Inhaltsverzeichnis Ereignisschleife miscroTask (M...