Vue erhält Token zur Implementierung des Beispielcodes für die Token-Anmeldung

// In store.js Methoden zum Hinzufügen und Löschen von Token in Mutationen hinzufügen. Vue von „vue“ importieren.
Vuex von „vuex“ importieren
Vue.Verwenden(Vuex)

const state = { // Global verwalteter Datenspeicher isLogin:'0',
	 ser:null,
	 Token:localStorage.getItem('Token') ? localStorage.getItem('Token'):'', // Token
};
exportiere standardmäßig neuen Vuex.Store({
	Zustand,
	getters:{ // Auf Datenänderungen warten getStorage(state){ // Die lokal gespeicherten Anmeldeinformationen abrufen if(!state.token){
	        Status.Token = JSON.parse(localStorage.getItem(Schlüssel))
	      }
	      Status-Token zurückgeben
	    }
	},
	Mutationen:
		$_setToken(state, value) { // Speichertoken setzen
	        Status.Token = Wert;
	        localStorage.setItem('Token', Wert);
	    },
	    $_removeStorage(Status, Wert){ // Token löschen
		      localStorage.removeItem('Token');
	    },
	}
})

// login.vue Seitenmethoden:{
	loginFun(){
		this.$api.post('angeforderter Link zur Backend-Schnittstelle',{
				Daten:{
					userId:this.user, // Anmeldename userPwd:this.psw, // Anmeldekennwort }
		}).then((res) => {
			wenn(res.data.status == 200){
				var userInfo = res.data.data;
				dies.$store.commit('$_setToken', userInfo.token);
				Toast({ message: 'Anmeldung erfolgreich', type: 'success', duration: 1500}); // UI-Popup-Fenster-Eingabeaufforderung this.$router.push({ name:'homePage' }); // Zur Startseite springen } else {
				Toast({ message: res.data.message, duration: 1500}); // UI-Popup-Fenster-Eingabeaufforderung }
		})
	}
}

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router/router“ importieren
Store aus „./store/store“ importieren

importiere PublicFun von './utils/publicFun' // Öffentliche Methode importiere './mintUi' // Importiere MintUi-Komponenten nach Bedarf. Konfiguriere sie bei Bedarf in mintUi.js. importiere '@/assets/mui/css/mui.css' // mui.css-Stil /* Axios-Plug-in importieren */
Axios von „Axios“ importieren
Vue.prototype.$http = axios;

// Globaler Routing-Konstruktor, bestimmt, ob eine Anmeldung erfolgen und zur Seite gesprungen werden soll router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.requireAuth)) { // Anmeldung erforderlich if(window.localStorage.token && window.localStorage.isLogin === '1'){
      nächste()
    } sonst wenn (zu.Pfad !== '/login') {
      let token = window.localStorage.token;
      wenn (Token === 'null' || Token === '' || Token === undefiniert){
          weiter({Pfad: '/login'})
          Toast({ message: ‚Es wurde festgestellt, dass Sie nicht angemeldet sind. Bitte melden Sie sich vor der Bedienung an!‘, Dauer: 1500 })
      }
    } anders {
      nächste()
    }
  } else { // Keine Anmeldung nötig next()
  }
})



//Öffentliche URL konfigurieren
Axios.defaults.baseURL = "http://www.sinya.online/api/"
//Anforderungs-Interceptor hinzufügen axios.interceptors.request.use(
  Konfiguration =>{
    wenn (store.state.token) {
      config.headers.common['token'] = store.state.token
    }
    Konfiguration zurückgeben;
  },
  Fehler =>{
    //Was tun bei Anforderungsfehlern? 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:
          localStorage.removeItem('Token');
          router.ersetzen({
            Pfad: '/views/login',
            Abfrage: {redirect: router.currentRoute.fullPath}//Nach erfolgreicher Anmeldung zur aktuell durchsuchten Seite springen})
      }
    }
  })

Vue.prototype.$publicFun = PublicFun // Globale öffentliche Methode einbinden Vue.prototype.$apps = Apps // öffentliche Methode app.js Vue.config.productionTip = false

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')

returnFun(){ // Abmelden MessageBox.confirm(this.lang.logoutTip).then(action => {
	     this.$store.commit('$_removeStorage'); // Anmeldeinformationen löschen this.$router.push({
	         Name:'Anmelden'
	     });
	     Toast({message:this.lang.logoutSuccess, Dauer: 1500});
	 }).fangen(()=>{})
}