前端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加密版】】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧!点击【关注+点赞+收藏+评论+转发】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕
