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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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实现图片简单上传
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
求职自荐信
2013/12/14 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
班训口号大全
2014/06/18 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
沈阳故宫导游词
2015/01/31 职场文书
《火烧云》教学反思
2016/02/23 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
如何Python使用re模块实现okenizer
2022/04/30 Python