vue通过cookie获取用户登录信息的思路详解


Posted in Javascript onOctober 30, 2018

思路

  • 进入页面
  • 若未登录,跳转至登陆页面
  • 若已登录,从cookie中获取用户信息,并执行后续操作

2. 登录页面,存入cookie(setCookie)

import {setCookie,getCookie}from 'src/js/cookieUtil'
 methods: {
  async cheack_n_p () {
   if( this.checkCode === this.pwd) {
    this.loginData = await getUserInfo(this.uname, this.pwd, this.adminPhone);
    if (this.loginData.res !== 0) {
     setCookie('userName',this.uname);
     setCookie('userPwd',this.pwd,);
     setCookie('phone',this.uname);
     setCookie('userId',this.loginData.obj.id);
     setCookie('userType',this.loginData.obj.userType);
     setCookie('adminPhone',this.adminPhone);
//    this.$router.go(-1);
     this.$router.replace('/');
    } else {
     alert("验证码错误!")
    }
   }
  },
  //验证手机号码部分
  async sendcode(){
   var pattern = /^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
    str =this.uname;
   if (!pattern.test(str)) {
    alert('请正确输入手机号!');
    return ;
   }
   this.time=60;
   this.disabled=true;
   this.timer();
   this.checkCode = (await getUserPhoneCode(this.uname)).resMsg;
   // this.checkCode = '123456';
   console.log( this.checkCode)
  },
  timer:function () {
   if (this.time > 0) {
    this.time--;
//         console.log(this.time);
    this.btntxt=this.time+"s后重新获取";
    setTimeout(this.timer, 1000);
   } else{
    this.time=0;
    this.btntxt="获取验证码";
    this.disabled=false;
   }
  }
 },

2. 页面判断

import {setCookie,getCookie}from 'src/js/cookieUtil'
 mounted () {
  if (this.isLogin==undefined||this.isLogin=="") {
   this.$router.replace('/login');
  } else {
   // 执行后续操作
   this.phone = getCookie("phone");
   }
 },
 computed: {
  isLogin () {
   // return this.$store.getters.getLogin;
   this.userId = getCookie("userId");
   // console.log(this.userId);
   return this.userId;
  }
 },

3. cookieUtil(setCookie,getCookie)

/**
 * Created by Schon on 2018/9/13 0013.
 */
//设置cookie
export function setCookie(key,value) {
 var exdate = new Date(); //获取时间
 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 36500); //保存的天数,我这里写的是100年
 //字符串拼接cookie
 window.document.cookie = key + "=" + value + ";path=/;expires=" + exdate.toGMTString();
};
//读取cookie
export function getCookie(param) {
 var c_param = '';
 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] == param) {
    c_param = arr2[1];
    //保存到保存数据的地方
   }
  }
  return c_param;
 }
};
function padLeftZero (str) {
 return ('00' + str).substr(str.length);
};

总结

以上所述是小编给大家介绍的vue通过cookie获取用户登录信息的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
微信小程序实现左滑修改、删除功能
Oct 19 #Javascript
小程序实现列表删除功能
Oct 30 #Javascript
require.js 加载过程与使用方法介绍
Oct 30 #Javascript
小程序实现左滑删除功能
Oct 30 #Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 #Javascript
小程序云开发部署攻略(图文教程)
Oct 30 #Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP如何实现跨域
2016/05/30 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JS功能代码集锦
2016/05/04 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python2.7的编码问题与解决方法
2016/10/04 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python安装scipy的方法步骤
2019/06/26 Python
python自定义时钟类、定时任务类
2021/02/22 Python
django form和field具体方法和属性说明
2020/07/09 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
2014年村委会工作总结
2014/11/24 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
贷款担保书
2015/01/20 职场文书
家长对孩子的寄语
2015/02/26 职场文书
垂直极限观后感
2015/06/08 职场文书
2016年校长新年寄语
2015/08/17 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python