Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中
场景
使用vue实现一个登录页面时,实现记住密码功能。
在勾选了记住密码后将密码存储到Cookie中,然后下次直接从Cookie中取。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
官网
https://www.npmjs.com/package/js-cookie
安装
npm install js-cookie --save
使用
为了使用方便,将设置和添加以及移除 Cookie的方法抽离出来为公共方法。
首先在项目下新建 utils目录,在目录下新建auth.js
然后在此js中先引入js-cookie插件
import Cookies from 'js-cookie'
然后声明一个作为存取和删除cookie的标志的key常量
const TokenKey = 'Admin-Token'
然后封装并暴露方法
export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}
所以auth.js的完整代码
import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}
然后在需要用到的vue页面中对需要的方法引入,这里以获取token为例
import { getToken } from '@/utils/auth'
然后就可以使用getToken获取token了
if (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}
你可可以不对cookie进行封装方法,在第一步安装完js-cookie后,
直接在需要对Cookie进行操作的vue页面,这里是login.vue登录页面
import Cookies from "js-cookie";
引入后在点击登录按钮的处理事件方法中
if (this.loginForm.rememberMe) {Cookies.set("username", this.loginForm.username, { expires: 30 });Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });} else {Cookies.remove("username");Cookies.remove("password");Cookies.remove('rememberMe');}
这块逻辑是如果点击了记住密码,则将用户名和密码和是否记住密码存入进Cookie
这里的密码调用了RSA加密的方式防止密码明文暴露。
具体实现可以参照下面
https://mp.csdn.net/console/editor/html/108343805
这是在点击登录按钮后点击了记住密码的操作,那么在一开始进入登录页面后就需要去获取Cookie然后
去填充进输入框
所以在login.vue页面的created函数中
created() {this.getCookie();},
调用获取Cookie的方法,方法的具体实现
getCookie() {const username = Cookies.get("username");const password = Cookies.get("password");const rememberMe = Cookies.get('rememberMe')this.loginForm = {username: username === undefined ? this.loginForm.username : username,password: password === undefined ? this.loginForm.password : decrypt(password),rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)};},
首先是声明相应的常量来根据key获取Cookie中的数据,然后去进行是否为undefined的判断。
如果是undefined的话说明就是之前没有执行记住密码的操作,即Cookie中没有存储的用户名密码等。
那么此登录表单绑定的输入框的属性就是本身,否则的话就是从Cookie中去取用户名和密码。
Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中相关推荐
- 用localStorage实现登录时记住密码的功能
用localStorage实现登录时记住密码的功能 HTNL代码片段 <el-input v-model="ruleForm.user" placeholder=" ...
- 推荐几个web中常用js图表插件
推荐几个web中常用js图表插件 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart ...
- vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
- 用cookie做前端页面的记住密码
1.首先,写一个登陆的jsp页面,做一个form表单的post请求,地址链接到自己的servlet文件 <form action="${pageContext.request.cont ...
- 对于AES和RSA算法的结合使用以及MD5加盐注册登录时的密码加密
RSA和AES结合使用 接上篇的RSA和AES算法加密之后,AES对称算法对数据量大的加密比较快,而RSA公私钥加密的话会影响加密效率,但是AES的加密与解密的密钥是一致的,导致密钥不能外泄,密钥在网 ...
- 前端登录实现记住密码功能
1.在登录的表单中添加记住密码勾选框 <el-form-item><el-checkbox name="type" v-model="remember& ...
- PHP会员登录实现记住密码功能 thinkPHP5
会员登录实现记住密码功能需要用到cookie 和session,首先我们来简单了解一下cookie 和session 的区别 Cookie Cookie是完全保存在客户端.当客户端禁止cookie时将 ...
- Android studio自动登录和记住密码的实现
Android studio自动登录和记住密码的实现 文章目录 Android studio自动登录和记住密码的实现 前言 一.效果 二.设计思路 三.知识点介绍 1. SharedPreferenc ...
- linux下次登录强制更改密码,如何强制用户在Linux上的下次登录时更改密码
当你使用默认密码创建用户时,你必须强制用户在下一次登录时更改密码. 当你在一个组织中工作时,此选项是强制性的.因为老员工可能知道默认密码,他们可能会也可能不会尝试不当行为. 这是安全投诉之一,所以,确 ...
最新文章
- nGrinder详细介绍及性能工具对比
- oracle 连接查询--内连接与外连接
- 重温JavaScript
- Python进阶03 模块
- 最大玻尔兹曼分布的mASK信号在AWGN信道下的容量计算
- 跨库查询(OpenDataSource)与链接服务器(Linking Server)
- 1到10用递归c语言,为什么这个递归能输出1到10
- Python MetaClass深入分析
- mui php上传图片,mui ajax图片上传
- 广域网协议之PPP,HDLC
- SQLite的基本使用
- 软件测试用例关键要素,软件测试用例的设计
- 数字信号处理(三)离散时间信号的Z变换
- Oracle重建控制文件
- 网站域名过户查询_过期域名查询
- notes on Scaling Ethereum with Raul Jordan and Preston Van Loon
- Oracle的Replace函数与translate函数详解与比较
- 小鸟云服务器如何进行远程桌面连接?
- jdbc mysql例子
- Python爬取数据分析
热门文章
- 浙江农林大学第二十一届程序设计竞赛校选拔赛(同步)
- ipad如何连接电脑_ipad如何将电脑文件下载到本地?
- JavaWeb中如何通过Request对象获取客户端IP地址
- 在开发中遇到过内存溢出么?原因有哪些?解决方法有哪些?
- python自动化测试面试题代码_Python自动化测试常见面试题(四)
- c语言不同指令意识,C语言必须理清的概念1
- 合成孔径成像算法与实现_浅析太赫兹成像技术在消防领域中的应用前景
- 联想电脑的一键换机软件——乐换机
- JAVA中char占用多少字节_Java中char占用几个字节
- sql入门经典第5版pdf网盘_如何学习 SQL 语言?