Comment les cookies et les crypto-js dans vue peuvent crypter et mémoriser les mots de passe

Ce chapitre présente comment utiliser les cookies et les crypto-js dans Vue pour crypter et mémoriser les mots de passe. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Utilisez crypto-js pour chiffrer et décrypter

La première étape consiste à installer

npm install crypto-js

La deuxième étape consiste à importer

import CryptoJS from "crypto-js";

dans la vue composant dont vous avez besoin.

La troisième étape, utilisez

    // 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'

Notez que mymessage est une chaîne Si vous souhaitez crypter l'ID utilisateur (type de numéro), vous devez d'abord le convertir en. une chaîne

Veuillez visiter la documentation officielle pour plus d'utilisation

Mémoriser le mot de passe

1. Le principe de mise en œuvre est que lors de la connexion, si Se souvenir Le mot de passe est vérifié (le statut de remplacement « Mémoriser le mot de passe » est enregistré dans le stockage local) et le mot de passe du compte est enregistré dans les cookies

2. Lorsque vous entrez dans la page de connexion, déterminez si le mot de passe est mémorisé (en jugeant ; depuis le stockage local), si le mot de passe est mémorisé Exportez les cookies vers le formulaire

Utilisez la méthode setcookie pour enregistrer et utilisez la méthode getcookie pour récupérer.
ok, écrivons la méthode

//设置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>La méthode de connexion est la suivante : </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 => {
          //----
        });
    },

Enfin, nous devons déterminer si l'utilisateur s'est souvenu du mot de passe dans le fichier créé sous-fonction dog pour effectuer les tâches connexes L'opération

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

Enfin, l'interface est collée, où RememberPsw est la valeur du modèle V du bouton de mémorisation du mot de passe, currentPortId est la valeur du modèle V du premier box, et le mot de passe est la valeur v-model de la deuxième valeur box -model.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!