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 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
jQuery插件开发全解析
Oct 10 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
JavaScript ES 模块的使用
Nov 12 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
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP实现的策略模式示例
2019/03/20 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
JavaScript简介
2015/02/15 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue中的router-view组件的使用教程
2018/10/23 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python-for循环的内部机制
2020/06/12 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
给老师的道歉信
2014/01/11 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
学校校庆演讲稿
2014/05/22 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
实习证明格式范文
2014/10/14 职场文书
上课说话检讨书
2015/01/27 职场文书
药房管理制度范本
2015/08/06 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书