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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
微信小程序实现左滑修改、删除功能
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导出Word文档的原理和实例
2013/10/21 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
SVG描边动画
2017/02/23 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Python文件和目录操作详解
2015/02/08 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python中if有多个条件处理方法
2020/02/26 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python如何安装第三方模块
2020/05/28 Python
Python常用数据分析模块原理解析
2020/07/20 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
安全大检查实施方案
2014/02/22 职场文书
婚前财产公证书
2014/04/10 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技