Detaillierte Erklärung der Vue-Anmeldung und -Abmeldung

{
    Pfad: '/login',
    Name:"Anmelden",
    Komponente:Anmelden,
    Meta:{
      Anmeldung:wahr
    }
} 
  //Definieren Sie „meta-true“, wo eine Anmeldung erforderlich ist, um zu sehen, ob sie erforderlich ist. if(to.matched.some(item=>item.meta.login)){//Anmeldung erforderlich console.log("Anmeldung erforderlich");
    if(isLogin){//1. Bereits angemeldet, direkt übergeben 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'){//2. Nicht angemeldet, gehe aber zur Anmeldeseite next()
    }
    if(!isLogin && to.name !=='login'){//3. Nicht angemeldet, nicht die Anmeldeseite next({name:"login"})
    }
   }else{//Keine Anmeldung nötig, gehe direkt zu next()
   }

 <div Klasse="Anmeldeabschnitt">
    <!-- :rules="Regeln" -->
    <el-form
      Beschriftungsposition = "oben"
      Beschriftungsbreite = "100px" Klasse = "Demo-Regelform"
      :Regeln="Regeln"
      :Modell="RegelnVon"
      Statussymbol
      ref="RegelVon"
    >
      <el-form-item label="Benutzername" prop="Name">
        <!-- Verwenden Sie v-model, um den vom Benutzer eingegebenen Namen abzurufen -->
        <el-input Typ="Text" v-Modell="Regeln von.name"></el-input>
      </el-form-item>
      <el-form-item label="Passwort" prop="Passwort"></el-form-item>
        <!-- Verwenden Sie v-model, um das vom Benutzer eingegebene Passwort abzurufen -->
        <el-input Typ="Passwort" v-model="rulesFrom.password"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- Submit-Ereignis definieren -->
        <el-button type="primary" @click="submitFrom('ruleFrom')">Senden</el-button>
        <el-button>Zurücksetzen</el-button>
      </el-form-item>
    </el-form>
  </div>

Regeln von: {
        Name:'',
        Passwort:''
      },
      Regeln:
        Name:[
          // Validierungsregeln {erforderlich: wahr, Nachricht: 'Bitte geben Sie Ihren Benutzernamen ein', Trigger: 'Blur'},
          {min:1,max:5,message:'Länge liegt zwischen 1 und 5 Zeichen',trigger:'blur'}
        ],
        Passwort:[
          {erforderlich: wahr, Nachricht: 'Bitte geben Sie Ihr Passwort ein', Auslöser: 'unscharf'},
          {min:1,max:5,message:'Länge liegt zwischen 1 und 5 Zeichen',trigger:'blur'}
        ]
      }

 // Wenn wir auf „Senden“ klicken, kann die Methode ausgelöst werden, um alles im Formular abzurufen: „submitFrom(formName){
      dies.$refs[formName].validate( (gültig)=>{
        wenn(gültig){
          // Wenn die Überprüfung erfolgreich war, werden die Benutzerinformationen und das Passwort an den Backend-Login zurückgegeben ({
            Name:diese.RegelnVon.Name,
            Passwort:this.rulesFrom.password,
          }).dann((Daten)=>{
            konsole.log(Daten);
            wenn(Datencode===0){
              localStorage.setItem('Token',Daten.Daten.Token)
              Fenster.Standort.href='/';
            }
            wenn(Datencode===1){
              dies.$Nachricht.Fehler(Daten.Nachricht)
            }
          })
        }anders{
          console.log('Fehler beim Senden!!');
          return false
        }
      })
    }

const token = localStorage.getItem('token');
// ! ! Token wird in Booleschen Typ konvertiert const isLogin=!!token;
// Beim Eingeben der Route müssen Sie das Token an das Backend zurückgeben, um zu überprüfen, ob es zulässig ist. const data = await userInfo();
    Store.commit('chageUserInfo',Daten.Daten)