前端vue实现登录前，记住密码功能案例【存储cookies与base64加密版】

有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。

---

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”

📝文章内容

哈喽，小伙伴们！本期为大家演示的是 记住密码【cookies加密】，在企业级项目当中必须要加密使用，以防黑客攻破，造成损失。

✍ 一、安装base64依赖

npm install --save js-base64

✍ 二、在单页面中引入

const Base64 = require("js-base64").Base64//引入加密方式

<template>
 <div class="loginState">
        <div class="stateLeft">
          <!-- 记住我 -->
          <el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox>
          <!-- 找回密码 -->
          <el-button type="text" @click="open()" class="forgetPw">忘记密码？</el-button>
        </div>
        <div class="stateRight">
          <el-button type="primary"
                     @click="submitForm('ruleForm')"
                     class="submit-btn">登录
            <i class="iconfont icon-denglu"></i></el-button>
        </div>
      </div>
</template>

<script>
  const Base64 = require("js-base64").Base64//引入加密方式
  export default {
   //业务逻辑...
  }	
</script>

✍ 三、核心代码

注意：

本次演示的 ruleForm.userName【用户名】、ruleForm.password【密码】可根据 你的字段名称替换掉即可。

<script>
  const Base64 = require("js-base64").Base64//引入加密方式
  export default {
   data(){
     return{
	  	checked: false,//记住密码 切换状态
     	}
     },
     mounted() {
    	 this.getCookie();
    },
     methods() {
	     // 设置cookie
	     setCookie(userName, password, days) {
	       let date = new Date(); // 获取时间
	       date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // 保存的天数
	       // 字符串拼接cookie
	       window.document.cookie =
	           "userName" + "=" + userName + ";path=/;expires=" + date.toGMTString();
	       window.document.cookie =
	           "password" + "=" + password + ";path=/;expires=" + date.toGMTString();
	     },
	      // 读取cookie 将用户名和密码回显到input框中
	     getCookie() {
	       if (document.cookie.length > 0) {
	         //分割成一个个独立的“key=value”的形式
	         let arr = document.cookie.split("; ");
	         for (let i = 0; i < arr.length; i++) {
	           // 再次切割，arr2[0]为key值，arr2[1]为对应的value
	           let arr2 = arr[i].split("=");
	           if (arr2[0] === "userName") {
	             this.ruleForm.userName = arr2[1];
	           } else if (arr2[0] === "password") {
	             this.ruleForm.password = Base64.decode(arr2[1]);// base64解密
	             this.checked = true;
	           }
	         }
	       }
	     },
	     //登录
	     submitForm(formName) {
	       this.$refs[formName].validate((valid) => {
	         if (valid) {
	           /* ------ 账号密码的存储位置 ------ */
	           if (this.checked) {
	             let password = Base64.encode(this.ruleForm.password); // base64加密
	             this.setCookie(this.ruleForm.userName, password, 7);
	           } else {
	             this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
	           }
	
	           /* ------ http登录请求 ------ */
	         } else {
	           console.log("error submit!!");
	           return false;
	         }
	       });
	     },
      },
  }	
</script>

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端vue实现登录前，记住密码功能案例【存储cookies与base64加密版】】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕

---

💡猜你喜欢

🈯前端element组件库中el-input密码右侧添加小眼睛切换状态

🈯前端css实现角标效果

🈯前端vue倒计时组件【模块化开发】

🈯vue快速实现锚点功能【简单版与高级版】

🈯前端vue项目最强优化-美化浏览器右侧滚动条样式与el-scrollbar