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 基础知识 被自己遗忘的
Oct 15 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
微信小程序实现左滑修改、删除功能
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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php使用PDO方法详解
2014/12/27 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
JS获取html对象的几种方式介绍
2013/12/05 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python 实现插入排序算法
2012/06/05 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
python调用百度语音REST API
2018/08/30 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python 产生token及token验证的方法
2018/12/26 Python
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
C++面试题目
2013/06/25 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
文明社区申报材料
2014/08/21 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2015年党性分析材料
2014/12/19 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
推荐信范文大全
2015/03/27 职场文书
大学生逃课检讨书
2015/05/04 职场文书
红色故事汇观后感
2015/06/18 职场文书
金榜题名主持词
2015/07/02 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Nginx域名转发https访问的实现
2021/03/31 Servers