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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 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
PHP应用JSON技巧讲解
2013/02/03 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
js中function()使用方法
2013/12/24 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
员工自我鉴定范文
2013/10/06 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
pandas求平均数和中位数的方法实例
2021/08/04 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers