Der praktische Prozess des Login-Status-Managements im vuex-Projekt

//Erstellen Sie ein neues Store-Verzeichnis unter dem src-Verzeichnis und erstellen Sie index.js wie folgt //Erstellen Sie ein Data Warehouse, importieren Sie Vuex von „vuex“;
importiere vue von „vue“;
importiere loginUser aus „loginUser.js“
Vue.Verwenden(Vuex)

const store = neuer Vuex.Store({
    Module: { //Module können verschiedene Zustände in einem eigenen Objekt unterbringen loginUser //Ob Sie sich gerade anmelden},
    strict: true, //Erlaube nur Zustandsänderungen durch Mutationen });

//Erstellen Sie ein loginUser.js und erstellen Sie dessen Status/Mutationen/Aktionen

//Der Status, der beibehalten werden muss state: {
       loading: false, //Anmeldestatus Benutzer: null, //Derzeit angemeldeter Benutzer},
//Berechnete Eigenschaftsgetter: {
       Status(Zustand) {
           wenn (Zustand.Laden) {
               Rückgabewert 'Laden'
           } sonst wenn (Status.Benutzer) {
               returniere 'login'
           } anders {
               returniere 'unLogin'
           }
       }
   },
 
 //Laden und Benutzerstatusmutationen ändern: {
       //Laden einstellen
       setLoading(Zustand, Nachricht) {
           Zustand.Laden = Nachricht
       },
       //Benutzer festlegen setUser(state, msg) {
           Status.Benutzer = Nachricht
       }
   },
 
 //Übermitteln Sie den geänderten Status in Aktionen actions: {
       //Die Login-Methode ctx entspricht store
       asynchrone Anmeldung(ctx, msg) {
           //Setze den Login-Status auf true
           ctx.commit("setLoading", wahr)
           const Ergebnis = warte auf xxxapi.login(msg.loginId, msg.loginPassword)
           wenn (Ergebnis) {
               //Anmeldung erfolgreich ctx.commit('setUser', result)
               //Nach erfolgreichem Login wird der Login-Status auf false gesetzt
               ctx.commit('setLoading', falsch)
           }
           //Gibt zurück, ob die Anmeldung erfolgreich war. Ergebnis zurückgeben
       },
       //Beurteilen Sie, ob Sie sich angemeldet haben async isLogin(ctx) {
           //Anmeldung ctx.commit('setLoading', true)
           //Rufen Sie die Schnittstelle auf, um zu sehen, ob sie angemeldet ist. const result = await xxxapi.isLogin();
           ctx.commit('setUser', Ergebnis);
           ctx.commit('setLoading', false)
       },
       //Abmelden async logout(ctx) {
           ctx.commit('setLoading', falsch)
           warte auf xxxapi.logout();
           ctx.commit('setUser', null);
           ctx.commit('setLoading', falsch)
       }
   },

<button :disabled="loading">{{ wird geladen ? 'wird geladen...' : 'Anmelden' }}
</button>
berechnet: {
//Kapseln Sie das Laden in die berechnete Datei, damit Sie this.$store.state.loginUser nicht bei jedem Aufruf schreiben müssen. // loading() {
    // gib dies zurück.$store.state.loginUser.loading;
    // }
    // Optimierung // Hilfsfunktion // importiere {mapState} von "vuex"
    ...mapState({
      wird geladen: (Status) => Status.loginUser.loading
    })
  }

asynchroner handleSubmit() {
      const Ergebnis = warte hierauf.$store.dispatch("loginUser/login", {
        Login-ID: diese.Login-ID,
        Anmeldekennwort: dieses.Anmeldekennwort
      });
      wenn (Ergebnis) {
        // Anmeldung erfolgreich Routensprung const path = this.$route.query.url || '/'
        this.$router.push(Pfad)
      }
    },

  <!-- Anmeldestatus der Seite anzeigen-->
<span v-if="status === 'loading'">Anmeldung wird durchgeführt, bitte warten...</span>
​
<template v-else-if="status === 'anmelden'">
    <span>Derzeit angemeldeter Benutzer {{user.name}}</span>
    <span @click="handleLogout">Abmelden</span>
</Vorlage>
​
<router-link to="/login" v-else>
        Anmelden</router-link>
  berechnet: {
...mapGetters("loginUser", ["status"]),
...mapState("loginUser", ["Benutzer"]),
}

asynchroner handleLogout(){
    warte darauf.$store.dispatch("loginUser/logout")
    //Zur Anmeldeseite springen this.$route.push(/xxx)
},

Der Anmeldestatus muss bei jeder Aktualisierung der Seite überprüft werden. Dies muss in main.js ermittelt werden, wenn vue erstellt wird.
store.dispatch('loginUser/isLogin')

//Home aus "./xx/xx.vue" in routes.js importieren
Exportstandard[
{
      Pfad: „/home“,
    Komponente:Home,
    Meta: {
      auth: true, //Seiten, für deren Zugriff Berechtigungen erforderlich sind}
}
]
Setzen Sie den Routenschutz in index.js router.beforeEach((to, from, next) => {
    wenn (to.meta.auth) {
        // Für den Zugriff ist eine Anmeldeberechtigung erforderlich const result = store.getters["loginUser/status"]
        if (Ergebnis === 'wird geladen') {
            // Ladestatus, ich weiß nicht, ob Sie angemeldet sind // Springen Sie zu einer Seite, auf der Sie sich anmelden, und überwachen Sie, ob die Anmeldung auf der Seite erfolgreich war, sonst bleibt sie für immer hier // Und wenn die Route springt, müssen Sie aufzeichnen, woher Sie vorher gekommen sind, sonst wissen Sie nicht, zu welcher Seite Sie als nächstes springen sollen ({
                Pfad: '/loading', //Gehe zur Seite [Anmelden] query: {
                    URL: zu.vollständigerPfad
                }
            })
        } sonst wenn (Ergebnis === 'login') {
            // Anmeldung erfolgreichnext();
        } anders {
            // Nicht angemeldet this.$message.info('Sie müssen sich anmelden');
             nächste({
                Pfad: '/login', //Zur Seite [Anmelden] gehen query: {
                    URL: zu.vollständigerPfad
                }
            })
        }
    } anders {
        //Seiten, auf die ohne Login-Berechtigung zugegriffen werden kann next()
    }
})

erstellt() {
  this.unWatch = this.$watch(() => this.$store.getters["loginUser/status"], (status) => {
    console.log('aktueller Status', Status);
    wenn (Status !== 'wird geladen'){
      dies.$router.push(diese.$route.query.url || '/home').catch(() => {}
    }
  }, {
    sofort: wahr
  })
},
zerstört() {
  //Überwachung abbrechen this.unWatch()
}