Vue中保存用户登录状态实例代码
发布时间：2020-12-17 02:56:03 所属栏目：百科 来源：网络整理
导读：首先我们假设，这里的登录组件（register.vue）是App.vue组件的子组件，是通过路由进入登录组件的。 登录组件中用户点击登录后，后台会传过来一个用户名，我的App.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，刷新页面也可以保持。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |