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 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JS求平均值的小例子
Nov 29 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php单例模式实现方法分析
2015/03/14 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
php array_map()函数实例用法
2021/03/03 PHP
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Python生成随机密码
2015/03/10 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
运动会解说词200字
2014/02/06 职场文书
出售房屋委托书范本
2014/09/24 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android