Vue中保存用户登录状态实例代码
2017-06-07 11:19
806 查看
首先我们假设,这里的登录组件(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,刷新页面也可以保持。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- spring aop action中验证用户登录状态的实例代码
- Vue中保存用户登录状态
- Vue中保存用户登录状态
- vuex + axios 做登录验证 并且保存登录状态的实例
- flask使用session保存登录状态及拦截未登录请求代码
- 使用cookie保存用户的登录状态——初步实现
- Java Web用户登录实例代码
- asp.net保存用户登录状态
- php中使用cookie来保存用户登录信息的实现代码
- JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
- 微信小程序 获取用户信息并保存登录状态
- nodejs基础教程-简单blog(5)-cookie保存用户登录状态
- 怎么保存Android端的用户登录状态
- 通过cookie保存并读取用户登录信息实例
- php使用cookie保存用户登录的用户名实例
- php cookie用户登录的详解及实例代码
- SpringMVC 实现用户登录实例代码
- PHP根据session与cookie用户登录状态操作类的代码
- php同时使用session和cookie来保存用户登录信息的实现代码