VUE realisiert Registrierungs- und Login-Effekte

<Vorlage>
  <div Klasse="Anmeldeabschnitt">
    <el-form 
      Beschriftungsposition = "oben" Beschriftungsbreite = "100px" Klasse = "Demo-Regelform"
      :Regeln="Regeln"
      :model="RegelnFormular"
        Statussymbol
        ref="RegelForm"
    >
      <el-form-item label="Benutzername" prop="Name">
        <el-input Typ="Text" v-Modell="RegelnForm.name"></el-input>
      </el-form-item>
      <el-form-item label="Passwort" prop="Passwort">
        <el-input type="Passwort" v-model="rulesForm.passwort"></el-input>
      </el-form-item>
 
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" >Senden</el-button>
        <el-button >Zurücksetzen</el-button>
      </el-form-item>
 
    </el-form>
  </div>
</Vorlage>
<Skript>
importiere {register} von '@/service/api';
Standard exportieren {
  Daten() {
    zurückkehren {
      RegelnForm:{
        Name:'',
        Passwort:''
      },
      Regeln:
        Name:[
          {erforderlich: wahr, Nachricht: 'Bitte geben Sie Ihren Namen ein', Auslöser: "unscharf"},
          {min:1,max:5,message:"Länge 3-5",trigger:"Unschärfe"}
        ],
        Passwort:[
          {erforderlich: wahr, Nachricht: 'Bitte geben Sie Ihr Passwort ein', Auslöser: "unscharf"},
          {min:3,max:5,message:"Länge 3-5",trigger:"Unschärfe"}
        ]
      }
    };
  },
  Methoden: {
    Formular absenden(Formularname){
      dies.$refs[formName].validate((valid)=>{
          wenn(gültig){
              //Wenn die Prüfung erfolgreich ist, senden Sie den Benutzernamen und das Passwort an das Backend-Register ({
                Name: this.rulesForm.name,
                Passwort: this.rulesForm.password,
              }).dann((Daten)=>{
                console.log(Daten)
                wenn(Datencode === 0){
                  localStorage.setItem('token',data.data.token);
                    Fenster.Standort.href='/';
                }
                wenn(Datencode === 1){
                  dies.$Nachricht.Fehler(Daten.Nachricht)
                }
              });
          }anders{
            console.log("Fehler beim Senden!!");
            gibt false zurück;
          }
      });
    }
  }
}
</Skript>
 
<style lang="stylus">
.login-Abschnitt
  Polsterung 0px 20px
</Stil>

<Vorlage>
  <div Klasse="Anmeldeabschnitt">
    <el-form
      Beschriftungsposition = "oben"
      Beschriftungsbreite = "100px" Klasse = "Demo-Regelform"
      :Regeln="Regeln"
      :model="RegelnFormular"
        Statussymbol
        ref="RegelForm"
    >
      <el-form-item label="Benutzername" prop="Name">
        <el-input Typ="Text" v-Modell="RegelnForm.name"></el-input>
      </el-form-item>
      <el-form-item label="Passwort" prop="Passwort">
        <el-input type="Passwort" v-model="rulesForm.passwort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">Senden</el-button>
        <el-button>Zurücksetzen</el-button>
      </el-form-item>
    </el-form>
  </div>
</Vorlage>
<Skript>
importiere {login} von '@/service/api';
 
Standard exportieren {
  Daten() {
    zurückkehren {
      //Objekt zum Speichern von Daten rulesForm:{
        Name:'',
        Passwort:''
      },
      Regeln:
        Name:[
          {erforderlich: wahr, Nachricht: 'Bitte geben Sie Ihren Namen ein', Auslöser: "unscharf"},
          {min:1,max:5,message:"Länge 3-5",trigger:"Unschärfe"}
        ],
        Passwort:[
          {erforderlich: wahr, Nachricht: 'Bitte geben Sie Ihr Passwort ein', Auslöser: "unscharf"},
          {min:3,max:5,message:"Länge 3-5",trigger:"Unschärfe"}
        ]
      }
    };
  },
  Methoden: {
    Formular absenden(Formularname){
      dies.$refs[formName].validate((valid)=>{
          wenn(gültig){
              //Wenn die Prüfung erfolgreich ist, senden Sie den Benutzernamen und das Passwort an den Backend-Login({
                Name: this.rulesForm.name,
                Passwort: this.rulesForm.password,
              }).dann((Daten)=>{
                console.log(Daten)
                wenn(Datencode === 0){
                  localStorage.setItem('token',data.data.token);
                    Fenster.Standort.href='/';
                }
                wenn(Datencode === 1){
                  dies.$Nachricht.Fehler(Daten.Nachricht)
                }
              });
          }anders{
            console.log("Fehler beim Senden!!");
            gibt false zurück;
          }
      });
    }
  }
}
</Skript>
 
<style lang="stylus">
.login-Abschnitt
  Polsterung 0px 20px
</Stil>

Vue von „vue“ importieren
Router von „vue-router“ importieren
Vue.use(Router)
Store aus '@/store' importieren
importiere {userInfo} aus '@/service/api.js'
Login aus '@/views/user-login/index.vue' importieren
const router = neuer Router({
    Modus: „Verlauf“,
    Routen:[
        {
            Pfad: '/login',
            Name:"Anmelden",
            Titel:"Anmeldeseite",
            Komponente:Anmelden,
            Meta:{
                Anmeldung:wahr
            }
        }
    ]
});
//Routenwächter router.beforeEach( async (to,from,next) => {
    /*
        Für einige Routen ist eine Anmeldung erforderlich, um den Anmeldestatus zu ermitteln 1. Nicht angemeldet: Zur Anmeldeseite springen 2. Anmelden: Direkt eingeben Für einige Routen ist keine Anmeldung erforderlich. Geben Sie direkt ein ps: ob angemeldet werden soll --meta
    */
    const token = localStorage.getItem('token');
    const isLogin = !!Token;
    //Wenn Sie die Route eingeben, müssen Sie ein Token an das Backend senden, um zu überprüfen, ob es zulässig ist. const data = await userInfo();
    Store.commit('chageUserInfo',Daten.Daten)
 
   if(to.matched.some(item => item.meta.login)){//Anmeldung erforderlichconsole.log("Anmeldung erforderlich");
 
        if(isLogin){//Bereits angemeldet, direkt weitergeben if(data.error === 400){//Das Backend teilt Ihnen mit, dass die Anmeldung fehlgeschlagen ist next({name:'login'});
                localStorage.removeItem('Token');
                zurückkehren;
            }
            wenn(zu.name === 'login'){
                weiter({name:'home'});
            }anders{
                nächste();
            }
            zurückkehren;
        }
        if(!isLogin && to.name === 'login'){//Nicht angemeldet, gehe aber zur Anmeldeseite next();
        }
        if(!isLogin && to.name !== 'login'){//Nicht angemeldet, nicht die Anmeldeseite next({name:'login'});
        }
   }anders{
       nächste();
   }
})
Standardrouter exportieren;