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 相关文章推荐
jquery实现弹出层完美居中效果
Mar 03 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JS函数式编程实现XDM一
Jun 16 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
python字典基本操作实例分析
2015/07/11 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers