vue登录页面cookie的使用及页面跳转代码


Posted in Javascript onJuly 10, 2019

1、大概流程

 a、登录:前端使用validate对输入信息进行验证 验证成功则成功跳转到用户信息页并存储cookie值

 b、首页跳转用户信息页:判断cookie值cookie存在并不为空则跳转用户信息页,若为空则跳转登录页

 c、退出页:点击退出跳转首页并删除cookie值

2、目录介绍

cookie.js为公共方法,用于cookie的存储、获取及删除

login.vue :登录页

index.vue:首页

user.vue:用户信息页

myinfo.vue:退出页

vue登录页面cookie的使用及页面跳转代码

3、文件内容

a、cookie.js

/*用export把方法暴露出来*/
/*设置cookie*/
export function setCookie(c_name,value,expire) {
  var date=new Date()
  date.setSeconds(date.getSeconds()+expire)
  document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
  //console.log(document.cookie)
}
/*获取cookie*/
export function getCookie(c_name){
  if (document.cookie.length>0){
    let c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1){ 
      c_start=c_start + c_name.length+1 
      let c_end=document.cookie.indexOf(";",c_start)
      if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
      } 
    }
  return ""
}
/*删除cookie*/
export function delCookie(c_name){
  setCookie(c_name, "", -1)
}

b、login.vue

methods:{
 submit(){
       setCookie('username',username,1000*60)
    axios.get('http://172.16.2.43:8080/static/data/mt_index.json').then((res)=>{ 
   this.$router.push({
          path: '/user', query:{userid: $("input[name='username']").val()}
         }); 
         //this.setuserid($("input[name='username']").val());        
  }) 
 }
}

c、index.vue

<div class="topheader">
  <span class="location fl">北京</span>
  <div class="search-box">
     <a href=""><input type="text"></a>      
  </div>
  <span class="mine" @click="jampmin">我的</span>
</div>
jampmin(){
  //获取cookie值
  var username=getCookie('username');
  if(username==''||username=='undefind'){
   this.$router.push({
        path: '/login'
      });
  }else{
   this.$router.push({
        path: '/user'
      });
  }     
}

d、myinfo.vue

<p @click="signout()" class="signout">退出</p>
signout(){
  /*删除cookie*/
  delCookie('username');
  this.$router.push({
    path: '/index'
  });
}

总结

以上所述是小编给大家介绍的vue登录页面cookie的使用及页面跳转代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
input按钮的事件处理大全
Dec 10 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 #Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 #Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 #Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 #Javascript
You might like
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python中字典的setdefault()方法教程
2017/02/07 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
对pandas中Series的map函数详解
2018/07/25 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
自我鉴定200字
2013/10/28 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
产品售后服务承诺书
2014/05/21 职场文书
人事任命书怎么写
2014/06/05 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2014年招生工作总结
2014/11/26 职场文书
小学生毕业评语
2014/12/26 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书