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

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

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

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

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

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

📝文章内容

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

✍ 一、安装base64依赖

npm install --save js-base64

✍ 二、在单页面中引入

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

<template><divclass="loginState"><divclass="stateLeft"><!-- 记住我 --><el-checkboxv-model="checked"class="rememberMe">记住我</el-checkbox><!-- 找回密码 --><el-buttontype="text"@click="open()"class="forgetPw">忘记密码？</el-button></div><divclass="stateRight"><el-buttontype="primary"@click="submitForm('ruleForm')"class="submit-btn">登录
            <iclass="iconfont icon-denglu"></i></el-button></div></div></template><script>const Base64 =require("js-base64").Base64//引入加密方式exportdefault{//业务逻辑...}</script>

✍ 三、核心代码

注意：

本次演示的

ruleForm.userName

【用户名】、

ruleForm.password

【密码】可根据 你的字段名称替换掉即可。

<script>const Base64 =require("js-base64").Base64//引入加密方式exportdefault{data(){return{checked:false,//记住密码 切换状态}},mounted(){this.getCookie();},methods(){// 设置cookiesetCookie(userName, password, days){let date =newDate();// 获取时间
           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]为对应的valuelet arr2 = arr[i].split("=");if(arr2[0]==="userName"){this.ruleForm.userName = arr2[1];}elseif(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!!");returnfalse;}});},},}</script>

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端vue实现登录前，记住密码功能案例【存储cookies与base64加密版】】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧!

点击

【

关注+点赞+收藏+评论+转发

】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕

💡猜你喜欢

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

🈯前端css实现角标效果

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

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

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