vue登录如何存储cookie_vue项目实现表单登录页保存账号和密码到cookie功能
实现功能:
1.一周内自动登录勾选时,将账号和密码保存到cookie,下次登陆自动显示到表单内
2.点击忘记密码则清空之前保存到cookie的值,下次登陆需要手动输入
次要的就不说了直接上主要的代码
html部分
登陆
帮助
一周内自动登录
忘记密码?
登陆
js部分
data () {
return {
ruleform: {
username: '', //用户名
password: '' //密码
},
}
}
methods: {
//点击登录调用方法
submitform(formname) {
//保存的账号
var name=this.ruleform.username;
//保存的密码
var pass=this.ruleform.password;
if(name==''||name==null){
alert("请输入正确的用户名");
return
}else if(pass==''||pass==null) {
alert("请输入正确的密码");
return
}
//判断复选框是否被勾选 勾选则调用配置cookie方法
if(this.checked=true){
//传入账号名,密码,和保存天数3个参数
this.setcookie(name,pass,7);
}
//接口
var url='myserver/user/login';
this.$http.post(url,this.ruleform,{emulatejson:true})
.then(res=>{
if(res.body=="fail"){
alert("用户名或密码错误,请重新输入");
this.ruleform.username='';
this.ruleform.password='';
return
} else{
alert("登陆成功!")
this.$router.push("/index")
}
});
},
//设置cookie
setcookie(c_name,c_pwd,exdays) {
var exdate=new date();//获取时间
exdate.settime(exdate.gettime() + 24*60*60*1000*exdays);//保存的天数
//字符串拼接cookie
window.document.cookie="username"+ "=" +c_name+";path=/;expires="+exdate.togmtstring();
window.document.cookie="userpwd"+"="+c_pwd+";path=/;expires="+exdate.togmtstring();
},
//读取cookie
getcookie:function () {
if (document.cookie.length>0) {
var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
for(var i=0;i
var arr2=arr[i].split('=');//再次切割
//判断查找相对应的值
if(arr2[0]=='username'){
this.ruleform.username=arr2[1];//保存到保存数据的地方
}else if(arr2[0]=='userpwd'){
this.ruleform.password=arr2[1];
}
}
}
},
//清除cookie
clearcookie:function () {
this.setcookie("","",-1);//修改2值都为空,天数为负1天就好了
}
},
//页面加载调用获取cookie值
mounted(){
this.getcookie()
}
总结
以上所述是小编给大家介绍的vue实现表单登录页保存账号和密码到cookie功能,希望对大家有所帮助
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
vue登录如何存储cookie_vue项目实现表单登录页保存账号和密码到cookie功能相关推荐
- remmima 不能保存_Vue项目实现表单登录页保存账号和密码到cookie功能_婳祎_前端开发者...
实现功能: 1.一周内自动登录勾选时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.点击忘记密码则清空之前保存到cookie的值,下次登陆需要手动输入 次要的就不说了直接上主要的代码 ...
- 浏览器--如何让登陆页面的表单不默认显示账号和密码
2019独角兽企业重金招聘Python工程师标准>>> 楼主做Javaweb项目,制作登陆页面访问时总是出现用户名和密码被自动填写的情况:如图楼主自制的网页登陆页面(这里以楼主用的C ...
- vue项目实现记住密码到cookie功能
vue项目实现记住密码到cookie功能(附源码) 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie ...
- springsecurity不拦截某个接口_SpringSecurity 默认表单登录页展示流程源码
SpringSecurity 默认表单登录页展示流程源码 本篇主要讲解 SpringSecurity提供的默认表单登录页 它是如何展示的的流程,涉及1.FilterSecurityIntercepto ...
- vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法
vue+ele 实现v-for动态数据循环表单,然后对每个结构进行表单校验的方法 项目开发时遇到form结构是动态遍历出来的,但是每个遍历出来的表单都需要做相对应的检验处理,ele提供的办法只能对单个 ...
- SpringBoot 整合Security——自定义表单登录
文章目录 一.添加验证码 1.1 验证servlet 1.2 修改 login.html 1.3 添加匿名访问 Url 二.AJAX 验证 三.过滤器验证 3.1 编写验证码过滤器 3.2 注入过滤器 ...
- Web项目,要求:保存用户名和密码在Cookie中,下次登录不再重新输入
设计一个实现登录功能的Web项目,要求:保存用户名和密码在Cookie中,下次登录不再重新输入 var cookie = {};//设置 cookie.SetCookies=function(name ...
- 表单提交_Linux curl 表单登录或提交与cookie使用
本文主要讲解通过curl 实现表单提交登录.单独的表单提交与表单登录都差不多,因此就不单独说了. 说明:针对curl表单提交实现登录,不是所有网站都适用,原因是有些网站后台做了限制或有其他校验.我们不 ...
- html透明表单登录注册页面源码
大家好,今天给大家介绍一款,html透明表单登录注册页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 自适应页面,适合于各种分辨率(图2) 图2 部分源码: <!doctype html ...
最新文章
- restful-api最佳实践
- valueOf()、toString()
- vue --- 过滤器、计算、方法、观察属性
- Linux文件系统十问
- [总结]FFMPEG视音频编解码零基础学习方法--转
- 使用隐含参数testMappingSpeed排查GoldenGate抽取慢的步骤
- linux shell 读取for循环中出现难处理的数据之单引号错误实例
- 美团点评2020年测试工程师笔试题
- Pycharm Professional(专业版2018.2.1)最简单方法破解,亲测有效(转)
- JAVA-初步认识-第十章-多态-类型判断-instanceof
- qt5以后正常显示中文(windows下 vs编译器)
- 深度学习:马尔可夫随机场
- 下面对html描述正确的有多选题,web前端笔试题
- html中代表颜色的字母16个,html中16进制的代码对应颜色表
- dejavu歌曲识别介绍
- python给pdf右上角盖章
- 在XX小学六一儿童节庆祝大会上的致辞
- 吴晓波罗振宇2019跨年演讲感想
- 里氏替换原则——举例说明Java设计模式中的里氏替换原则
- 虚拟机安装linux黑屏一个光标,虚拟机启动后黑屏只剩一个光标
热门文章
- linux 内核模块开发,Linux内核模块开发(笔记)
- centos7调节虚拟机字体_初次安装虚拟机中Ubuntu16.04系统设置的一些小问题(小白教程)...
- JavaSE——IO(下)(Properties类、序列化与反序列化)
- Andoird自定义ViewGroup实现竖向引导界面
- 【程序员薪资】2021年04月新鲜出炉,看看你拖后腿了吗?
- bat脚本如何自动输入y_在Mac如何写一个相对自动的翻译脚本
- 3 运行时间太长_10大污水处理预处理系统动态图及运行管理、故障处理
- GCD简介四:挂起,目标指定,信号量
- mysql 安全删除_mysql的binlog安全删除的一种方法
- AI应用开发基础傻瓜书系列3-损失函数