VUE implementiert Token-Anmeldeüberprüfung

importiere Vue von „vue“;
importiere Vuex von „vuex“;
 
Vue.use(Vuex);
 
exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Token: localStorage.getItem('Token') ? localStorage.getItem('Token') : ''
  },
  Mutationen:
    setToken (Status, Token) {
      Zustand.Token = Token;
      localStorage.setItem("token",token.token); //Token speichern
    },
    delToken(Status) {
      Zustand.Token = '';
      localStorage.removeItem("token"); //Token löschen
    }
  }
})

<input type="text" v-model="username" placeholder="Benutzername" />
<input type="Passwort" v-model="Passwort" placeholder="Passwort"/>

<Skript>
  importiere { mapMutations } von 'vuex';
  Standard exportieren {
    Name: "managerLogin",
    Daten() {
      zurückkehren {
        Benutzername:'', //BenutzernamePasswort:'', //Passwort};
    },
    Methoden:{
      ...mapMutations(['setToken']),
      login:funktion() {
        wenn (dieser.Benutzername === '' || dieses.Passwort === '') {
          alert("Konto oder Passwort dürfen nicht leer sein!");
        }
        anders {
          // Gemäß der API-Schnittstelle, um das Token zu erhalten
          dies.$ajax.get('http:///api/wx/Public/login', {
            params: { //Eingehende Parameter Benutzername: dieser.Benutzername, Passwort: dieses.Passwort, Gerätetyp: "mobile"
            }
          }).Dann(
            res => {
              Konsole.log(Res.Daten);
              if(res.data.code===1) { //Wenn Code=1, war die Überprüfung erfolgreich this.setToken({token: res.data.data.token}); //Methode zum Zuweisen eines Tokens im Store this.$router.push('/managerHome');
              }
              anders{
                alert(res.data.msg); //Popup-Fehlermeldung}
            }).fangen(Fehler => {
            alert('Schnittstellenverbindungsfehler');
            konsole.log(Fehler);
          });
 
        }
      }
  }
</Skript>

<Skript>
    importiere {mapMutations} von „vuex“;
    Standard exportieren {
      Name: "manager_infor",
      Methoden:{
        ...mapMutations(['delToken']),
        Ausfahrt:Funktion(){
          dies.delToken({token:''});
          dies.$router.push('/managerLogin');
        }
      }
    }
</Skript>

router.beforeEach((bis, von, weiter) => {
  if (to.path === '/managerLogin') { //Wenn die Seite, zu der gesprungen werden soll, die Anmeldeoberfläche ist next(); //direkt springen}
  else if (to.path === '/managerHome'){ //Wenn die Seite, zu der gesprungen werden soll, die persönliche Schnittstelle ist let token = localStorage.getItem('token'); //Den lokal gespeicherten Token-Wert abrufen if (token===null||token===''){ //Wenn das Token leer ist, schlägt die Überprüfung fehl und es wird zur Anmeldeseite gesprungen next('/managerLogin');
    }
    else{ //Wenn es nicht leer ist, war die Überprüfung erfolgreich next();
    }
  }
  anders{
    nächste();
  }
});
 
Standardrouter exportieren;

importiere Axios von „Axios“;
Store aus „./store/main“ importieren;
Vue.prototype.$ajax = axios
 
neuer Vue({
  el: '#app',
  Router,
  store, //Store muss Komponenten hinzufügen: { App },
  Vorlage: '<App/>'
})
 
//Abfangjäger anfordern axios.interceptors.request.use(config => {
//Überprüfen Sie, ob ein Token vorhanden ist. Wenn ja, fügen Sie das Token dem Header jeder Seite hinzu.
  wenn (store.state.token) {
    
    config.headers.common['XX-Token']=store.state.token //Das XX-Token sollte hier entsprechend dem Namen des Anfrageheaders im Login-Interface geschrieben werden}
 
  Konfiguration zurückgeben;
}, Fehler => {
// Anforderungsfehler return Promise.reject(error);
});
 
//Antwort-Abfangjäger axios.interceptors.response.use(
  Antwort => {
    Antwort zurückgeben;
  },
  
  error => { //Standardmäßig werden alle Fehler außer 2XX als Fehler betrachtet, wenn (error.response) {
      Schalter(Fehler.Antwort.Status){
        Fall 401:
          dies.$store.commit('delToken');
          router.replace({ //Zum Pfad der Anmeldeseite springen: '/managerLogin',
            query: { redirect: router.currentRoute.fullPath } // Nimm den umgeleiteten Routenpfad als Parameter und springe nach erfolgreichem Login zur Route});
      }
    }
    gibt Promise.reject(Fehler.Antwort) zurück;
  }
);