Vue中保存用户登录状态实例代码
更新时间：2017年06月07日 11:19:56 作者：HaiJing1995
本篇文章主要介绍了Vue中保存用户登录状态实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。、
首先我们假设，这里的登录组件（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，刷新页面也可以保持。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
vue使用keep-alive后从部分页面进入不缓存示例详解
这篇文章主要给大家介绍了关于vue使用keep-alive后从部分页面进入不缓存的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue 禁用浏览器的前进后退操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue3.0中使用postcss-pxtorem的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的,下面这篇文章主要给大家介绍了关于Vue如何利用flex布局实现TV端城市列表功能的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了关于Vue新搭档TypeScript快速入门实践，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue3中refs用法举例的相关资料,Vue.js中的$refs是一个对象,它持有已注册过ref特性的所有组件和元素,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vuex 使用及简单实例(计数器)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue语法自动转typescript，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要给大家介绍了关于vue内点击url下载文件的最佳解决方案,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
最新评论