Anmeldung zur Token-Verifizierung im Vue-Projekt (Front-End-Teil)

importiere Vue von „vue“;
importiere Vuex von „vuex“;

Vue.use(Vuex);

const store = neuer Vuex.Store({
 Zustand: {
  Token: localStorage.getItem('Token') ? localStorage.getItem('Token') : ''
 },
 Mutationen:
  setToken (Status, Token) {
   Zustand.Token = Token;
   localStorage.setItem("Token",Token.Token);
  },
  delToken(Status) {
   Zustand.Token = '';
   localStorage.removeItem("Token");
  }
 }
})

Standardspeicher exportieren;

npm installiere vuex --save

localStorage.setItem("Token",Token.Token);

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'
Axios von „Axios“ importieren
Versprechen von „es6-promise“ importieren
Store aus „./store/index“ importieren
versprechen.polyfill()

Vue.use(ElementUI)
Vue.config.productionTip = falsch
 

axios.defaults.baseURL = "http://192.168.80.152:8088"
axios.defaults.headers.post['Inhaltstyp'] = "Anwendung/json"
axios.defaults.withCredentials = wahr
axios.defaults.headers.common['Autorisierung'] = store.state.token
Vue.prototype.$axios = axios
 

/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
  Router,
  speichern,
  Komponenten: { App },
  Vorlage: '<App/>'
});

// Anfrage-Interceptor hinzufügen axios.interceptors.request.use(config => {
// Was ist vor dem Senden einer Anfrage zu tun? // Überprüfen Sie, ob ein Token vorhanden ist, und fügen Sie ggf. jedem Seitenkopf ein Token hinzu.
  wenn (store.state.token) {
    config.headers.common['Autorisierung']=store.state.token.token
  }

  Konfiguration zurückgeben;
}, Fehler => {
// Etwas mit dem Anforderungsfehler tun return Promise.reject(error);
});

// HTTP-Antwort-Interceptor axios.interceptors.response.use(
  Antwort => {

    Antwort zurückgeben;
  },
  Fehler => {

    wenn (Fehler.Antwort) {
      Schalter (Fehler.Antwort.Status) {
        Fall 401:
          dies.$store.commit('del_token');
          router.ersetzen({
            Pfad: '/login',
            Abfrage: {redirect: router.currentRoute.fullPath}//Nach erfolgreicher Anmeldung zur aktuell durchsuchten Seite springen})
      }
    }
    Rückgabewert Promise.reject(error.response.data)
  });

Store aus „./store/index“ importieren

neuer Vue({
  el: '#app',
  Router,
  speichern,
  Komponenten: { App },
  Vorlage: '<App/>'
});

// Anfrage-Interceptor hinzufügen axios.interceptors.request.use(config => {
// Was ist vor dem Senden einer Anfrage zu tun? // Überprüfen Sie, ob ein Token vorhanden ist, und fügen Sie ggf. jedem Seitenkopf ein Token hinzu.
  wenn (store.state.token) {
    config.headers.common['Autorisierung']=store.state.token.token
  }

  Konfiguration zurückgeben;
}, Fehler => {
// Etwas mit dem Anforderungsfehler tun return Promise.reject(error);
});

// HTTP-Antwort-Interceptor axios.interceptors.response.use(
  Antwort => {

    Antwort zurückgeben;
  },
  Fehler => {

    wenn (Fehler.Antwort) {
      Schalter (Fehler.Antwort.Status) {
        Fall 401:
          dies.$store.commit('del_token');
          router.ersetzen({
            Pfad: '/login',
            Abfrage: {redirect: router.currentRoute.fullPath}//Nach erfolgreicher Anmeldung zur aktuell durchsuchten Seite springen})
      }
    }
    Rückgabewert Promise.reject(error.response.data)
  });

router.beforeEach((bis, von, weiter) => {
  wenn(zu.Pfad === '/login') {
    nächste();
  } anders {
    : Lassen Sie token = localStorage.getItem('token');
    wenn(token === 'null' || token === '') {
      weiter('/login');
    }anders {
      nächste();
    }
  }
});

//Führen Sie etwas zum Exportstandard dieses Komponenten-Skript-Tags ein, importieren Sie { mapMutations } von „vuex“;
//Dies ist der Methodenteil methods: {

      ...mapMutations(['setToken']),
      login(formular){


        lass _this = dies;
        wenn(formular.telefon === "" || form.password === ""){
          _this.$message.error("Bitte geben Sie Ihre Telefonnummer oder Ihr Passwort ein");
        }anders {
          dies.$axios.post(`/user/check/login`,_this.form).then(res => {
            var code = res.data.code;
            var mes = res.data.message;
            wenn(code === 1){
             /* Speicher.setItem("Token",res.data.data);
              _dieses.token = res.daten.daten;*/
             // _this.setToken({Autorisierung: _this.token})
             // console.log("Erfolg");
              _this.$message.success('Anmeldung erfolgreich');
              _this.token = res.daten.daten;
              _this.setToken({token: _this.token});
              _this.$router.push({Pfad:"/home"});

              var Speicher = Fenster.localStorage;
              //Alarm(storage.getItem("Token"));

              wenn(dies.$store.state.token) {
                dies.$router.push('/home');
                Konsole.log(dies.$store.state.token.token);
              } anders {
                dies.$router.replace('/login');
              }

            }anders{
              _this.$message.error(mes);
            }
          }).catch(Funktion(Fehler){
            console.log(fehler);
            _this.$message.error("Anmeldefehler, bitte kontaktieren Sie den Programmentwickler!!");

          })
        }

      }
     }

lass _this = dies;

 _this.setToken({token: _this.token});

...mapMutations(['setToken']),