vue—维持登录状态

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

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，后面发现并不需要

vue—维持登录状态相关推荐

Vue路由 --登录状态的判断
前言: 在登录一个系统,要求第一次登录出现登录页面,之后再访问该系统,跳过登录页面. 一. router/index.js路由加校验 export default new Router({mode ...
html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
vue如何保存登录状态到全局？【vue状态管理】
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...
vue router.beforeEach跳转路由验证用户登录状态
使用vue判断验证用户登录状态导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前 ...
Vue登录注册，并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
Vue登录注册，并保持登录状态 1
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
python vue token_Haytham个人博客开发日志 -- Flask+Vue基于token的登录状态与路由管理...
指路牌符合一下关键词,这篇博客有可能会对你有帮助不使用工厂函数的Flask应用不使用蓝本的Flask应用 Flask跨域配置基于Token的登录状态管理 Flask+Vue Vue路由拦截 A ...
spring boot +vue用什么记录登录状态_2019年web前端Vue面试题总结
点击右上方红色按钮关注"web秀",让你真正秀起来面试必备:2019Vue经典面试题总结(含答案) 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写 ...
Vue登录注册，并保存登录状态
项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等那如何判断路由是否需要登录呢? 在router.js中添加meta区 ...

vue—维持登录状态

vue—维持登录状态相关推荐

最新文章

热门文章