vue实现浏览器记住密码功能，并进行加密存储

前提：
将浏览器的自动填充密码功能关闭，如果关闭不了，可参考https://blog.csdn.net/csdn_zhuang/article/details/104818168

方案：
1、安装加解密插件，并在login.vue中引用：
安装：

 npm install crypto-js

import CryptoJS from "crypto-js";

2、html部分：

<el-form-item style="margin-top:-10px;margin-bottom:-5px;"><el-checkbox v-model="checked" style="color:#a0a0a0;margin-top:-10px;">记住密码</el-checkbox></el-form-item>

data部分：

 checked: true

methods部分：
提交时候，根据是否记住密码，选择更新cookie还是清空：

submit() {if (this.checked) {//传入账号名，密码，和保存天数3个参数this.setCookie(this.loginForm.userName, this.loginForm.password, 7);} else {//清空Cookiethis.clearCookie();}}},

加解密cookie过程：

//设置cookiesetCookie(c_name, c_pwd, exdays) {var exdate = new Date(); //获取时间exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数// Encrypt，加密账号密码var cipherName = CryptoJS.AES.encrypt(this.loginForm.userName + "","secretkey123").toString();var cipherPsw = CryptoJS.AES.encrypt(this.loginForm.password + "","secretkey123").toString();//字符串拼接cookiewindow.document.cookie ="userName" +"=" +cipherName +";path=/;expires=" +exdate.toGMTString();window.document.cookie ="userPwd" + "=" + cipherPsw + ";path=/;expires=" + exdate.toGMTString();},getCookie() {if (document.cookie.length > 0) {var arr = document.cookie.split("; ");for (var i = 0; i < arr.length; i++) {var arr2 = arr[i].split("=", 2); //再次切割//判断查找相对应的值if (arr2[0] == "userName") {// Decrypt，将解密后的内容赋值给账号var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");this.loginForm.userName = bytes.toString(CryptoJS.enc.Utf8);} else if (arr2[0] == "userPwd") {// Decrypt，将解密后的内容赋值给密码var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");this.loginForm.password = bytes.toString(CryptoJS.enc.Utf8);}}}},//清除cookieclearCookie() {this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了},

vue实现浏览器记住密码功能，并进行加密存储相关推荐

vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
关闭浏览器记住密码功能
首先关于浏览器关闭记住密码的功能已经有很多答案了,但是还是要写一写,也算一点自己的经历. 方法很简单.先上代码: 首先在表单输入密码的input类型设置为text当获取焦点的时候再把类型改为passw ...
vue如何实现记住密码功能？
记住密码和账号的功能由前端进行操作,而这种操作一般会用到本地存储.当然,本地存储的也不止密码和账号,还有是记住密码框的状态. 首先你需要封装三个方法用来存取数据,(password,username是 ...
vue项目实现记住密码到cookie功能
vue项目实现记住密码到cookie功能(附源码) 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie ...
浏览器记住密码后，密码框自动填充功能禁用
大家在做修改密码功能的时候,需要手动输入原始密码来进行校验,然而浏览器记住密码后页面上的password框点击后会自动出现原始密码,这样即使不知道原始密码,也能进行密码的修改,是非常不安全的操作.参考 ...
vue考试系统后台管理项目-登录、记住密码功能
考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组考试管理模块:新增/编辑/删除考试试题 ...
禁止input密码自动填充及浏览器记住密码完整解决方案
完整方案禁止缓存,禁止自动填充,不会触发浏览提示记住密码,其余与正常一致,该方案跨浏览器兼容且易结合任何框架及库使用. npm i nice-pass-word 具体使用参照文档既可以. 下面的内容 ...
[网络安全自学篇] 二.Chrome浏览器保留密码功能渗透解析及登录加密入门笔记
补充学习资料: TK13大神Windows PE专栏 https://blog.csdn.net/u013761036/article/category/6401236 TK13大神Windows对抗 ...
PHP会员登录实现记住密码功能 thinkPHP5
会员登录实现记住密码功能需要用到cookie 和session,首先我们来简单了解一下cookie 和session 的区别 Cookie Cookie是完全保存在客户端.当客户端禁止cookie时将 ...

vue实现浏览器记住密码功能，并进行加密存储

vue实现浏览器记住密码功能，并进行加密存储相关推荐

最新文章

热门文章