So verwenden Sie Cookies, um Passwörter auf der Vue-Anmeldeseite 7 Tage lang zu speichern

      <el-form
       ref="Formular"
       :model="Formular"
       Beschriftungsbreite = "80px"
       Beschriftungsposition = "oben"
       @einreichen.native.verhindern
      >
       <el-form-item label="Benutzername/Konto">
        <div Klasse="Benutzerfehler">
         <el-Eingabe
          Größe="mini"
          v-model.trim="form.Benutzername"
          löschbar
         ></el-Eingabe>
        </div>
       </el-form-item>
       <el-form-item label="Passwort">
        <div Klasse="pwdError">
         <el-Eingabe
          Größe="mini"
          v-model.trim="form.loginPwd"
          löschbar
          Passwort anzeigen
         ></el-Eingabe>
        </div>
       </el-form-item>
       <el-checkbox label="Konto merken" v-model="isRemember"></el-checkbox>
       <el-button native-type="senden" size="mini" @click="loginPage"
        >Anmelden</el-button
       >
      </el-form>

Standard exportieren {
 Name: "login",
 Daten() {
  zurückkehren {
   bilden: {
    Benutzername: '',
    Anmeldekennwort: '',
   },
   isRemember: false,
  };
 },
 montiert() {
  // Schritt 1: Wenn die Seite geladen ist, prüfen Sie zunächst, ob im Cookie ein Benutzername und ein Passwort vorhanden sind. Dies kann mit this.getCookie(); verwendet werden.
 },
 Methoden: {
  /* Schritt 3: Wenn sich der Benutzer anmeldet, überprüfen Sie zunächst, ob Benutzername und Passwort korrekt sind. Wenn nicht, wird ein Anmeldefehler angezeigt. Wenn dies der Fall ist, überprüfen Sie, ob der Benutzer das gemerkte Passwort überprüft hat. Wenn nicht, löschen Sie das Cookie rechtzeitig und kehren Sie zum Ausgangszustand zurück. Wenn dies aktiviert ist, speichern Sie Benutzername und Passwort im Cookie und legen Sie eine Gültigkeitsdauer von 7 Tagen für die Verwendung fest (natürlich kann dies auch die Zeit vor dem Update des Cookies sein).
  */
  asynchrone Login-Seite() {
   // Senden Sie eine Anfrage, um zu prüfen, ob der vom Benutzer eingegebene Benutzername und das Passwort korrekt sind. const res = await this.$api.loginByUserName(this.form)
   wenn(res.isSuccess == false){
    this.$message.error("Anmeldefehler")
   }
   anders{
    const selbst = dies;
    // Schritt 4, wenn das Kontrollkästchen aktiviert ist, rufen Sie die Methode „set cookie“ auf, um den aktuellen Benutzernamen, das Passwort und die Ablaufzeit im Cookie zu speichern, if (self.isRemember === true) {
     // Geben Sie den Kontonamen, das Passwort und die Anzahl der zu speichernden Tage (Ablaufzeit) als drei Parameter ein. // 24.01.60 Der Test kann eine Minute lang durchgeführt werden, was offensichtlicher ist. self.setCookie(this.form.userName, this.form.loginPwd, 24.01.60);
     // self.setCookie(this.form.userName, this.form.loginPwd, 7); // Dies läuft in 7 Tagen ab} 
    // Wenn es nicht aktiviert ist, löschen Sie das Cookie rechtzeitig, da es sich bei diesem Cookie möglicherweise um das letzte noch nicht abgelaufene Cookie handelt. Daher sollte es rechtzeitig gelöscht werden, sonst {
     selbst.clearCookie();
    }
    // Natürlich wird die Route auch dann umgeleitet, wenn der Benutzer das Cookie überprüft hat. this.$router.push({
     Name: "Projekt",
    });
   }
  },
  // Cookies setzen
  setCookie(Benutzername, Passwort, Exdays) {
   var exdate = new Date(); // Aktuelle Anmeldezeit abrufenexdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // Zur aktuellen Anmeldezeit sieben Tage hinzufügen, um die Ablaufzeit des Cookies zu erhalten, also die Anzahl der zu speichernden Tage. // String-Verkettung von Cookies, da Cookies in der Form name=valuewindow.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString(); gespeichert werden.
   window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString();
  },
  // Schritt 2: Wenn der Cookie einen Benutzernamen und ein Passwort enthält, wird dieser zweimal ausgeschnitten und zur Verwendung im Formular gespeichert. Wenn nicht, gibt es kein getCookie: function () {
   wenn (Dokument.Cookie.Länge > 0) {
    var arr = document.cookie.split("; "); //Da es ein Array ist, muss es geschnitten werden. Drucken Sie es aus und Sie werden es wissen // console.log(arr,"cut");
    für (var i = 0; i < arr.length; i++) {
     var arr2 = arr[i].split("="); // Erneut teilen // console.log(arr2,"Split 2");
     // // Überprüfe den entsprechenden Wert if (arr2[0] === "userName") {
      this.form.userName = arr2[1]; // Eine Kopie des Benutzernamens und Passworts speichern} else if (arr2[0] === "userPwd") {
      this.form.loginPwd = arr2[1]; // entschlüsselbar} else if (arr2[0] === "isRemember") {
      this.isRemember = Boolean(arr2[1]);
     }
    }
   }
  },
  // Cookies löschen
  clearCookie: fu![Bild](/img/bVcOHhz)
   this.setCookie("", "", -1); // Löschen und die Anzahl der Tage auf -1 Tag setzen},
 },
};