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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
JavaScript实现切换多张图片
Jan 27 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
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
php设计模式小结
2013/02/15 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
高考标语大全
2014/06/05 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
element多个表单校验的实现
2021/05/27 Javascript
javascript Number 与 Math对象的介绍
2021/11/17 Javascript