前端vue实现登录前,记住密码功能案例存储cookies与base64加密版
Posted 水香木鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端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密码右侧添加小眼睛切换状态
🈯前端vue项目最强优化-美化浏览器右侧滚动条样式与el-scrollbar
以上是关于前端vue实现登录前,记住密码功能案例存储cookies与base64加密版的主要内容,如果未能解决你的问题,请参考以下文章