vue—维持登录状态

做的时候遇到一个问题,就是在Login.vue中输入正确的用户名和密码并跳转到Main.vue,发现并没有更新用户登录状态,我只是在created中设置了http请求。后面我增加了事件提交才解决的。

Login.vue

doLogin(){
            //console.log(this.$http.post);
            this.$http.post('http://localhost/wyyx/user.php',
              {uname:this.uname,upwd:this.upwd},{emulateJSON:true,withCredentials:true}).then(
              (response)=>{
                  //console.log(response.body);
                  if(response.body.ok==1){
                    sessionStorage.isLogin = 0;
                    sessionStorage.uname = this.uname;
                    this.$emit('doLogin',this.uname);
                    this.$router.push('/');
                  }else{
                    this.$router.push('/login');
                  }
              });
        },

Main.vue

<router-view @doLogin="doLogin"></router-view>
created:function(){
        console.log("created");
        //console.log(this.$http.get);
        this.$http.get("http://localhost/wyyx/isLogin.php",{emulateJSON:true,withCredentials:true}).then((response)=>{
            console.log("11111");
            console.log(response.body);
            if(response.body.ok==1){
              this.lrShow=0;
              this.uname=response.body.uname;
            }else{
              this.lrShow=1;
              this.uname='';
            }
        });
      },
doLogin(userName){
              this.lrShow=0;
              this.uname=userName;
            },
logout(){
                console.log("logout");
                sessionStorage.isLogin = 1;
                sessionStorage.uname = '';
                this.lrShow=1;
                this.$http.get("http://localhost/wyyx/logout.php",{emulateJSON:true,withCredentials:true}).then((response)=>{
                    console.log(response.body);
                })
            }

需要注意的是,子组件向父组件是通过事件提交实现的,并且在父组件router-view上声明事件

参考链接:

点击打开链接

本来还以为要用到vuex,后面发现并不需要




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值