源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-06-24 08:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要: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,刷新页面也可以保持。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部