Vue中保存用户登录状态实例代码


Posted in Javascript onJune 07, 2017

首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的。

登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的“登录注册”字样变为“用户名”。

为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage

代码如下:

register.vue中用户点击登录触发signIn方法

signIn(){
    this.formData = $(".form").serialize();
    var that = this;
    this.$http.get("/api/user", this.formData)
     .then(response => {
      that.userName = response.data.data.user.userName;
      that.userHead = response.data.data.userHead;
      that.$emit('userSignIn', that.userName);
     })
     .catch(error => {
      console.log(error);
     });
   }

这里为了测试我直接mock的数据,真实情况应该是this.$http.post

这里的重点是那句

that.$emit('userSignIn', that.userName);

向父组件(App.vue)传值

App.vue代码HTML

<keep-alive>
   <router-view @userSignIn="userSignIn"></router-view>
</keep-alive>

App.vue代码JS

export default {

 data(){
  return{
   userName: sessionStorage.userName
  }
 },

 methods:{
  //子组件(register)将用户名传过来
  userSignIn(userName){
   sessionStorage.userName = userName;
   this.userName = sessionStorage.userName;
  }
 }
}

这样父组件就可以使用用户名,保持了登录状态,并且因为使用了sessionStorage,刷新页面也可以保持。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 #Javascript
Angular 4 指令快速入门教程
Jun 07 #Javascript
jstree单选功能的实现方法
Jun 07 #Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
webpack打包单页面如何引用的js
Jun 07 #Javascript
You might like
浅析SVN常见问题及解决方法
2013/06/21 PHP
javascript 播放器 控制
2007/01/22 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JS重要知识点小结
2011/11/06 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
专业实习自我鉴定
2013/10/29 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
新闻发布会主持词
2014/03/28 职场文书
公司节能减排倡议书
2014/05/14 职场文书
军训拉歌口号
2014/06/13 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
捐款感谢信
2015/01/20 职场文书
办公室主任岗位职责
2015/01/31 职场文书
保研推荐信范文
2015/03/25 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
小学生手册家长意见
2015/06/03 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书