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

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

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

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

代码如下:

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

{

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

这里的重点是那句

向父组件(App.vue)传值

App.vue代码HTML

App.vue代码JS

data(){

return{

userName: sessionStorage.userName

}

},methods:{

//子组件(register)将用户名传过来

userSignIn(userName){

sessionStorage.userName = userName;

this.userName = sessionStorage.userName;

}

}

}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

总结

以上是编程之家为你收集整理的Vue中保存用户登录状态实例代码全部内容,希望文章能够帮你解决Vue中保存用户登录状态实例代码所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android canvas_Android 如何实现气泡选择动画

作者:Irina Galata Android 开发者: Yulia Serbenenko UI/UX 设计师 译者:skyar2009链接:https://juejin.im/post/58e5ec838d6d8100616d82e2/跨平台用户体验统一正处于增长趋势:早些时候 iOS 和安卓有着不同的体验,但是…

MVC中的验证规则

前面的博客中曾经提到过ModelBing机制,也在Demo中体现过,在MVC中更吊的是封装了自定义的验证规则。下面来一个Demo来展现一下,看了后,你一定会爱上它的,能让你少写很多JS语句。 1.View层 [html] view plaincopyprint…

网络——在网络上发送,接收数据

问题 创建并加入一个网络会话是一回事,但如果不能发送或接收任何数据那么网络会话有什么用呢? 解决方案 当玩家连接到会话时,你可以在一个PacketWriter流中存储所有想要发送的数据。完成这个操作后,你可以使用LocalNetworkPlayer.…

微服务之 EShop on dapr概览

????欢迎点赞 :???? 收藏 ⭐留言 ???? 如有错误敬请指正,赐人玫瑰,手留余香!????本文作者:由webmote 原创,首发于 【掘金】????作者格言:生活在于折腾,当你不折…

python开发面试问题及答案_前50个Python面试问题(最受欢迎)

热门Python面试问答下面列出的是关于Python编程语言的最常见面试问题和答案。让我们探索!!#1)Python可以用于Web客户端和Web服务器端编程吗?哪一个最适合Python?答案: Python由于具有创建业务逻辑&#xff…

苹果android 对比,苹果安卓旗舰差距有多少?看了这份对比,果粉傻眼了

最近,身边不少小伙伴都在换机,有的换了最新的 iPhone 12 系列,有的则是换成安卓旗舰,毕竟现在的安卓旗舰与 iPhone 之间的体验已经十分接近,甚至在一些方面安卓旗舰还有着不小的优势。下面,我们以最新的 iP…

【暴强】200种好口碑便宜护肤品 - 生活至上,美容至尚!

200种好口碑便宜护肤品 一.洁面类 1.欧泊莱均衡洁面膏40ML 25元:很丰富的泡沫,,最大的好处就是洗完了脸不干,很舒服。 2.珊拉娜除逗防疤洗面奶:泡沫非常细,毛孔清透 3.丹芭碧绿茶洁面啫喱18元:觉得洗后很…

查看和修改Oracle数据库服务器端的字符集

Oracle数据库查看和修改服务器端的字符集的方法是本文主要要介绍的内容,接下来救让我们一起来了解一下这部分内容。 A、oracle server 端字符集查询 select userenv(‘language’) from dual 其中NLS_CHARACTERSET 为server端字符集 NLS_LANGUAGE 为 server端字符显…

python画画用哪库好_Python我要学画画-turtle库

上帝说:“要有光!” 于是,就有了光。 ---《圣经》旧约创世纪篇 我要学画画,Python便有了turtle库。 turtle库是一个点线面的简单图像库。画布中心为坐标系原点,小海龟起始位置就在原点方向向右。turtle界面 Python与库…

Xubuntu菜单删改条记

作者: Zhu.CA 出自: http://www.linuxdiyf.com1. 主菜单:主菜单为 ~/.config/xfce4/desktop/menu.xml。删改可用"Xfce Settings Manager"中的"Menu editer",运用上绝对俭朴,不做过多详述。 2. System子菜单&#xff…

看完这15张动图,秒懂万有引力与航天难点!

全世界只有3.14 % 的人关注了爆炸吧知识椭圆的画法大质量天体使周围天体绕其运转模拟太阳系星球轨迹非常接近圆火箭运载卫星升空卫星飞行过程中可以点火调整姿态同步卫星必须在赤道上空北斗全球卫星导航轨道半径越大,卫星越慢人类发射的卫星越来越多嫦娥沿椭圆轨道奔…

物联网工程专业的迷茫与抉择

大家好,我是阿辉,很高兴在这里和你讲述所思所想。周末了,就聊点比较轻松的话题。正文共1633字,预计阅读时间5分钟。想必很多朋友是通过#毕业四年,我当初是如何走上编程这条路的!#这篇文章才熟知我的吧&…

html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果

本文实例讲述了jQueryCSS实现的网页二级下滑菜单效果。分享给大家供大家参考。具体如下:这是一款简洁型的 jQueryCSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果和菜单下滑效果和渐变效果已经做出来了&…

parentElement,srcElement 使用

代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns"http://www.w3.org/1999/xhtml"><head><meta http-equiv"Content-T…

哈哈哈,程序员没有女朋友的原因,我终于找到了!

全世界只有3.14 % 的人关注了爆炸吧知识程序员没有女朋友的原因▼程序员大脑里想的▼每天要学习太多语言&#xff0c;程序员太忙了▼女朋友 VS 编译器▼程序员sao起来&#xff0c;还需要女朋友吗&#xff1f;▼电脑才是程序员的女朋友▼互道晚安后&#xff0c;会不会偶遇在同一…

基于事件驱动架构构建微服务第7部分:在仓储上实现事件溯源

原文链接&#xff1a;https://logcorner.com/building-microservices-through-event-driven-architecture-part7-implementing-eventsourcing-on-repositories/在本文中&#xff0c;我将讨论Repository上的Event Sourcing实现。仓储负责将事件添加到事件存储并从事件存储中检索…

python选择题题目_Python接口测试题(持续更新中)

1、json和字典的区别&#xff1f; Json是轻量级的数据交互格式&#xff0c;以key-value的键值对形式来保存数据&#xff0c;结构清晰&#xff0c;可以说是目前互联网项目开发中最常用的一种数据交互格式。 字典&#xff0c;同样是以key-value的键值对来保存数据&#xff0c;是p…

javascript事件之:jQuery事件中实例对象和拓展对象之间的通信

我们总结过jQery事件中的实例原型对象对外接口和拓展对象&#xff0c;现在我们看看他们是如何进行通信联系的。 先来看便捷方法&#xff1a; 1 //调用的还是实例对象下的on()和trigger()2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click db…

SQL 中的unicode字符

要将字符转换成unicode字符以显示某些符号&#xff0c;可以在字符串前加N,如&#xff1a; select N♧♡♂♀♠♣♥❤☜☞☎☏ 转载于:https://www.cnblogs.com/Laro/archive/2011/03/07/1976483.html

html5 ajax数据显示,html5的ajax学习(二)

一、基础知识点1.ajax可以做事情&#xff1a;局部刷新 浏览器搜索列表记录 加载更多的数据2.登录页面同步网络请求&#xff1a;页面全部刷新&#xff0c;用户量大体验很不好3.ajax的详解&#xff1a;ajax的get和post请求 同步还是异步&#xff0c;true为异步ajax.open("ge…