Comment mémoriser les mots de passe sur les cookies en vue

Cet article présente principalement le projet vue pour implémenter l'exemple de fonction de mémorisation du mot de passe dans le cookie (code source ci-joint), qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article présente le projet vue An. Un exemple de réalisation de la fonction de mémorisation des mots de passe des cookies est partagé avec tout le monde. Les détails sont les suivants :

Page de connexion

Fonction implémentée :

1. Cochez Mémoriser le mot de passe, et lorsque vous cliquez sur connexion, le numéro de compte et le mot de passe seront enregistrés dans les cookies, et ils seront automatiquement affichés dans le formulaire la prochaine fois que vous vous connecterez.
2. Décochez, et lorsque vous cliquez sur connexion, les cookies précédemment enregistrés seront effacés. La valeur de , vous devrez saisir manuellement

la prochaine fois que vous vous connecterez. L'idée générale est de sauvegarder/récupérer/supprimer les cookies. ; chaque fois que vous accédez à la page de connexion, lisez d'abord le cookie. S'il y a des informations de compte dans le cookie du navigateur, il remplira automatiquement la boîte de connexion. Le cookie est enregistré une fois la connexion réussie. Il sera jugé si le cookie est actuel. l'utilisateur a coché l'option Mémoriser le mot de passe. Si tel est le cas, les informations du compte seront enregistrées dans le cookie. L'effet est comme indiqué ci-dessus :

Allez directement au code principal

<.>Partie HTML

<p class="ms-login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm(&#39;ruleForm&#39;)"></el-input>
      </el-form-item>
      <!-- `checked` 为 true 或 false -->
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <br>
      <br>
      <p class="login-btn">
        <el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">登录</el-button>
      </p>
    </el-form>
  </p>

Partie JS

  //页面加载调用获取cookie值
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
             const self = this;
            //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (self.checked == true) {
              console.log("checked == true");
              //传入账号名，密码，和保存天数3个参数
              self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
            }else {
             console.log("清空Cookie");
             //清空Cookie
             self.clearCookie();
            }
            
            //与后端请求代码，本功能不需要与后台交互所以省略
            
            console.log("登陆成功");
         
        });
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie: function() {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split(&#39;=&#39;); //再次切割
            //判断查找相对应的值
            if (arr2[0] == &#39;userName&#39;) {
              this.ruleForm.username = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == &#39;userPwd&#39;) {
              this.ruleForm.password = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
      }

Les informations sur les cookies dans le navigateur sont indiquées ci-dessous, veuillez noter que le délai d'expiration/d'âge maximum du cookie est ici GMT, l'heure unifiée du monde GMT+8 heures est l'heure de Pékin. (Il n'y a pas de fonction de cryptage ici)

Le projet Vue de lien de code source implémente la page de connexion par formulaire pour enregistrer le compte et le mot de passe dans la fonction cookie

Ce qui précède C'est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Utilisation des icônes via Element dans Vue

Utilisation du cryptage de mot de passe bcryptjs dans Express

Une classe de cache encapsulée implémentée en tant que cache via Redis dans nodejs

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!