Wie Cookies und Krypto-JS in Vue Passwörter verschlüsseln und merken können

Dieses Kapitel stellt vor, wie man Cookies und Krypto-JS in Vue verwendet, um Passwörter zu verschlüsseln und zu speichern. Ich hoffe, dass es für Sie hilfreich ist.

Verwenden Sie Crypto-JS zum Verschlüsseln und Entschlüsseln

Der erste Schritt besteht darin,

npm install crypto-js

zu installieren. Der zweite Schritt besteht darin,

import CryptoJS from "crypto-js";

in die Vue-Komponente zu importieren Sie benötigen drei Schritte: Verwenden Sie

    // Encrypt 加密 
    var cipherText = CryptoJS.AES.encrypt(
      "my message",
      "secretkey123"
    ).toString();
    console.log(cipherText)
    // Decrypt 解密
    var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");
    var originalText = bytes.toString(CryptoJS.enc.Utf8);
    console.log(originalText); // 'my message'

. Beachten Sie, dass mymessage eine Zeichenfolge ist. Wenn Sie die Benutzer-ID (Zahlentyp) verschlüsseln möchten, müssen Sie sie zuerst in eine Zeichenfolge

konvertieren

Weitere Verwendungsmöglichkeiten Bitte besuchen Sie die offizielle Dokumentation

Passwort merken

1. Das Implementierungsprinzip besteht darin, dass beim Anmelden „Passwort merken“ aktiviert ist (speichern Sie „Passwort merken“) ' Status zu localstorage ), um das Kontopasswort in Cookies zu speichern

2. Stellen Sie beim Aufrufen der Anmeldeseite fest, ob das Passwort gespeichert wird (gemessen an localstorage) und ob das Passwort gespeichert wird. Cookies in das Formular exportieren;

Zum Speichern wird die Methode setcookie und zum Abrufen die Methode getcookie verwendet.
OK, schreiben wir die Methode

//设置cookie
    setCookie(portId, psw, exdays) {
      // Encrypt，加密账号密码
      var cipherPortId = CryptoJS.AES.encrypt(
        portId+'',
        "secretkey123"
      ).toString();
      var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();
      console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功

      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
      window.document.cookie =
        "currentPortId" +
        "==" +
        cipherPortId +
        ";path=/;expires=" +
        exdate.toGMTString();
      window.document.cookie =
        "password" +
        "==" +
        cipherPsw +
        ";path=/;expires=" +
        exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
        for (var i = 0; i <p>Die Anmeldemethode lautet wie folgt: </p><pre class="brush:php;toolbar:false"> login() {
      this.$http //请根据实际情况修改该方法
        .post(...)
        .then(res => {
          if (res.data.code == "success") {
            if (this.rememberPsw == true) {
               //判断用户是否勾选了记住密码选项rememberPsw，传入保存的账号currentPortId，密码password，天数30
              this.setCookie(this.currentPortId, this.password, 30);
            }else{
              this.clearCookie();
            }
            //这里是因为要在created中判断，所以使用了localstorage比较简单，当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。
            localStorage.setItem("rememberPsw", this.rememberPsw);
            
          } else {
           //----
          }
        })
        .catch(err => {
          //----
        });
    },

Schließlich müssen wir in der erstellten Hunde-Unterfunktion feststellen, ob sich der Benutzer an das Passwort erinnert hat um verwandte Vorgänge auszuführen

//判断是否记住密码
//**注意这里的true是字符串格式，因为Boolean存进localstorage中会变成String**
 created() {
    //判断是否记住密码
    if (localStorage.getItem("rememberPsw") == 'true') {
      this.getCookie();
    }
  }

Abschließend wird die Schnittstelle eingefügt, wobei „rememberPsw“ der V-Modellwert der Schaltfläche „Passwort merken“ ist, „currentPortId“ der V-Modellwert des ersten Felds und „password“ der v- Modellwert der zweiten Box.

Das obige ist der detaillierte Inhalt vonWie Cookies und Krypto-JS in Vue Passwörter verschlüsseln und merken können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!