vue项目实现表单登录页保存账号和密码到cookie功能


Posted in Javascript onAugust 31, 2018

vue项目实现表单登录页保存账号和密码到cookie功能

实现功能:

1.一周内自动登录勾选时,将账号和密码保存到cookie,下次登陆自动显示到表单内

2.点击忘记密码则清空之前保存到cookie的值,下次登陆需要手动输入

 次要的就不说了直接上主要的代码

html部分

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom">
 <h1 style="font-size: 1.5rem;color: #fff;font-weight: bold;padding: 1rem 0;">登陆</h1>
 <el-form-item >
  <el-input placeholder="账号" v-model="ruleForm.userName"></el-input>
 </el-form-item>
 <el-form-item>
  <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
 </el-form-item>
 <div style="padding: 1rem 0 2rem 0;" class="clear">
  <span class="lf" style="color:#0489cc;">帮助</span>
  <div class="rt">
   <el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox>
   <span @click="clearCookie" style="cursor: pointer;color: #f19149;font-size: 0.75rem;margin-left: 5px;">忘记密码?</span>
  </div>
 </div>
 <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">登陆</el-button>
</el-form>

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<arr.length;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功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
原生js编写2048小游戏
Mar 17 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
vue router 跳转后回到顶部的实例
Aug 31 #Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 #Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 #Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 #Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 #Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 #Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 #Javascript
You might like
实用函数8
2007/11/08 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
js实现旋转木马效果
2017/03/17 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python异常处理例题整理
2019/07/07 Python
python 提取文件指定列的方法示例
2019/08/07 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
经典洗发水广告词
2014/03/13 职场文书
公司总经理岗位职责
2014/03/15 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
房屋租赁意向书
2014/04/01 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
解除租房协议书
2014/12/03 职场文书
职代会闭幕词
2015/01/28 职场文书
担保书格式范文
2015/09/22 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript