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

Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)

Ich habe viele Projekte geschrieben, bei denen de...

Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse

Inhaltsverzeichnis JavaScript-Ereignisse: Häufig ...

HTML-Grundlagen HTML-Struktur

Was ist eine HTML-Datei? HTML steht für Hyper Text...

Informationen zur Installation von Homebrew auf dem Mac

Vor kurzem hat Xiao Ming einen neuen Mac gekauft ...

WeChat-Applet-Entwicklung Formularvalidierung WxValidate-Nutzung

Ich persönlich bin der Meinung, dass das Entwickl...

So installieren Sie Docker CE auf Ubuntu 18.04 (Community Edition)

Deinstallieren Sie alte Versionen Sollten Sie zuv...

HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen

Teil 1 HTML <html> – Start-Tag <Kopf>...

So zeigen Sie die IP-Adresse des Docker-Containers an

Ich dachte immer, Docker hätte keine IP-Adresse. ...

Übersicht über die Unterschiede zwischen Linux TTY/PTS

Wenn wir einen Buchstaben auf der Tastatur eingeb...

Beispiel für die Verwendung der in Vue integrierten Komponente „Keep-Alive“

Inhaltsverzeichnis 1. Verwendung von Keep-Alive A...