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