Die Idee und der Prozess von Vue zur Realisierung der Funktion zum Speichern von Konto und Passwort

<el-form :model="loginForm" :rules="Regeln" ref="loginForm" label-width="100px" class="loginForm demo-ruleForm">
  <!-- Konto -->
  <el-form-item label="Konto" prop="Benutzer-ID" autocomplete="ein">
    <el-input v-model="loginForm.userId" placeholder="Bitte geben Sie Ihre Kontonummer ein"></el-input>
  </el-form-item>
  <!-- Passwort -->
  <el-form-item label="Passwort" prop="Passwort">
    <el-input type="password" v-model="loginForm.password" placeholder="Bitte geben Sie Ihr Passwort ein" @keyup.enter="submitForm('loginForm')"></el-input>
  </el-form-item>
  <div Klasse="Tipp">
    <!-- Angemeldet bleiben -->
    <el-checkbox v-model="checked" class="rememberMe">Angemeldet bleiben</el-checkbox>
    <!-- Passwort abrufen -->
    <el-button type="text" @click="open()" class="forgetPw">Passwort vergessen? </el-button>
  </div>
  <!-- Anmelden -->
  <el-form-item>
    <el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">Anmelden</el-button>
  </el-form-item>
</el-form>

//Installieren Sie npm install --save js-base64
//Einführen const Base64 = require("js-base64").Base64

Standard exportieren {
  Daten() {
    zurückkehren {
      Anmeldeformular: {
        Benutzer-ID: "",
        Passwort: "",
      },
      geprüft: falsch,
    };
  },
  montiert() {
    let Benutzername = localStorage.getItem("Benutzer-ID");
    if (Benutzername) {
      this.loginForm.userId = localStorage.getItem("Benutzer-ID");
      this.loginForm.password = Base64.decode(localStorage.getItem("password")); // Base64-Entschlüsselung this.checked = true;
    }
  },
  Methoden: {
    Formular absenden(Formularname) {
      dies.$refs[formName].validate((gültig) => {
        if (gültig) {
          /* ------ Speicherung von Account und Passwort ------ */
          wenn (dies.überprüft) {
            let password = Base64.encode(this.loginForm.password); // Base64-Verschlüsselung localStorage.setItem("userId", this.loginForm.userId);
            localStorage.setItem("Passwort", Passwort);
          } anders {
            localStorage.removeItem("Benutzer-ID");
            localStorage.removeItem("Passwort");
          }
          /* ------ HTTP-Anmeldeanforderung ------ */
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    },
  },
};

Standard exportieren {
  Daten() {
    zurückkehren {
      Anmeldeformular: {
        Benutzer-ID: "",
        Passwort: "",
      },
      geprüft: falsch,
    };
  },
  montiert() {
    dies.getCookie();
  },
  Methoden: {
    Formular absenden(Formularname) {
      dies.$refs[formName].validate((gültig) => {
        if (gültig) {
          /* ------ Speicherung von Account und Passwort ------ */
          wenn (dies.überprüft) {
            let password = Base64.encode(this.loginForm.password); // Base64-Verschlüsselung this.setCookie(this.loginForm.userId, password, 7);
          } anders {
            this.setCookie("", "", -1); // Ändere beide Werte so, dass sie leer sind und die Anzahl der Tage negativ ist: 1 Tag}
          /* ------ HTTP-Anmeldeanforderung ------ */
        } anders {
          console.log("Fehler beim Senden!!");
          gibt false zurück;
        }
      });
    },
    
    // Cookies setzen
    setCookie(userId, passwort, tage) {
      let date = new Date(); // Uhrzeit abrufen date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // Anzahl der zu speichernden Tage // ​​Cookie zur Zeichenfolgenverkettung
      fenster.dokument.cookie =
        "Benutzer-ID" + "=" + Benutzer-ID + ";Pfad=/;läuft ab=" + date.toGMTString();
      fenster.dokument.cookie =
        "Passwort" + "=" + Passwort + ";Pfad=/;läuft ab=" + date.toGMTString();
    },
    
    // Lies das Cookie und gib den Benutzernamen und das Passwort in das Eingabefeld zurück getCookie() {
      wenn (Dokument.Cookie.Länge > 0) {
        let arr = document.cookie.split("; "); //In unabhängige "Schlüssel=Wert"-Formen aufteilen for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); // Erneut teilen, arr2[0] ist der Schlüsselwert, arr2[1] ist der entsprechende Wert
          if (arr2[0] === "Benutzer-ID") {
            this.loginForm.userId = arr2[1];
          } sonst wenn (arr2[0] === "Passwort") {
            this.loginForm.password = Base64.decode(arr2[1]); // Base64-Entschlüsselung this.checked = true;
          }
        }
      }
    },
  },
};