Vue implementiert Benutzeranmeldung und Token-Verifizierung

<Vorlage>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="Benutzername"/>
    <input type="text" v-model="loginForm.password" placeholder="passwort"/>
    <button @click="login">Anmelden</button>
  </div>
</Vorlage>
 
<Skript>
importiere { mapMutations } von 'vuex';
Standard exportieren {
  Daten () {
    zurückkehren {
      Anmeldeformular: {
        Benutzername: '',
        Passwort: ''
      },
      BenutzerToken: ''
    };
  },
 
  Methoden: {
    ...mapMutations(['changeLogin']),
    anmelden() {
      lass _this = dies;
      wenn (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('Konto oder Passwort dürfen nicht leer sein');
      } anders {
        dies.axios({
          Methode: 'post',
          URL: '/Benutzer/Anmelden',
          Daten: _this.loginForm
        }).dann(res => {
          Konsole.log(Res.Daten);
          _this.userToken = 'Träger ' + res.data.data.body.token;
          // Benutzertoken in vuex_this.changeLogin speichern ({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('Anmeldung erfolgreich');
        }).fangen(Fehler => {
          alert('Konto- oder Passwortfehler');
          konsole.log(Fehler);
        });
      }
    }
  }
};
</Skript> 

importiere Vue von „vue“;
importiere Vuex von „vuex“;
Vue.use(Vuex);
 
const store = neuer Vuex.Store({
 
  Zustand: {
    //Token speichern
    Autorisierung: localStorage.getItem('Autorisierung') ? localStorage.getItem('Autorisierung') : ''
  },
 
  Mutationen:
    // Ändern Sie das Token und speichern Sie es im localStorage
    changeLogin (Status, Benutzer) {
      Status.Autorisierung = Benutzer.Autorisierung;
      localStorage.setItem('Autorisierung', Benutzer.Autorisierung);
    }
  }
});
 
Standardspeicher exportieren;

importiere Vue von „vue“;
Router von „vue-router“ importieren;
Login aus „@/components/login“ importieren;
importiere Home von „@/components/home“;
 
Vue.use(Router);
 
const router = neuer Router({
  Routen: [
    {
      Weg: '/',
      Umleitung: '/login'
    },
    {
      Pfad: '/login',
      Name: 'Anmelden',
      Komponente: Login
    },
    {
      Pfad: '/home',
      Name: 'Heimat',
      Komponente: Home
    }
  ]
});
 
// Navigationswächter // Verwenden Sie router.beforeEach, um einen globalen Frontwächter zu registrieren, der ermittelt, ob der Benutzer angemeldet ist router.beforeEach((to, from, next) => {
  wenn (zu.Pfad === '/login') {
    nächste();
  } anders {
    let token = localStorage.getItem('Autorisierung');
 
    wenn (Token === null || Token === '') {
      weiter('/login');
    } anders {
      nächste();
    }
  }
});
 
Standardrouter exportieren;

// Fügen Sie einen Anforderungs-Interceptor hinzu und fügen Sie dem Anforderungsheader ein Token hinzu
axios.interceptors.request.use(
  Konfiguration => {
    wenn (localStorage.getItem('Autorisierung')) {
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
 
    Konfiguration zurückgeben;
  },
  Fehler => {
    returniere Promise.reject(Fehler);
});

localStorage.removeItem('Autorisierung');
dies.$router.push('/login');