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 相关文章推荐
JS完成代码前最好对其做5件事
Apr 07 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
js实现简单计算器
Nov 22 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
详解JavaScript执行模型
Nov 16 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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版(3)
2006/10/09 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
关于python多重赋值的小问题
2019/04/17 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
浅析matlab中imadjust函数
2020/02/27 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
特色蛋糕店创业计划书
2014/01/28 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
群众路线专项整治方案
2014/10/27 职场文书
房产公证书格式
2015/01/26 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
检察院起诉书
2015/05/20 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS