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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
深入探寻javascript定时器
Jan 02 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
Three.JS实现三维场景
Dec 30 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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缓存类代码(附详细说明)
2011/06/09 PHP
php汉字转拼音的示例
2014/02/27 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
php时间函数用法分析
2016/05/28 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
pandas 数据实现行间计算的方法
2018/06/08 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
Why we need EJB
2016/10/20 面试题
大学生优秀团员事迹材料
2014/01/30 职场文书
商场总经理岗位职责
2014/02/03 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
教你用python控制安卓手机
2021/05/13 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL