Vue中保存用户登录状态
2017-06-29 11:36
591 查看
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的。
登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的“登录注册”字样变为“用户名”。
为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage
代码如下:
register.vue中用户点击登录触发signIn方法
2
3
4
5
6
7
8
9
10
11
12
13
这里为了测试我直接mock的数据,真实情况应该是this.$http.post
这里的重点是那句
向父组件(App.vue)传值
App.vue代码HTML
2
3
App.vue代码js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
这样父组件就可以使用用户名,保持了登录状态,并且因为使用了sessionStorage,刷新页面也可以保持
登录组件中用户点击登录后,后台会传过来一个用户名,我的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); }); }1
2
3
4
5
6
7
8
9
10
11
12
13
这里为了测试我直接mock的数据,真实情况应该是this.$http.post
这里的重点是那句
that.$emit('userSignIn', that.userName);1
向父组件(App.vue)传值
App.vue代码HTML
<keep-alive> <router-view @userSignIn="userSignIn"></router-view> </keep-alive>1
2
3
App.vue代码js
export default { data(){ return{ userName: sessionStorage.userName } }, methods:{ //子组件(register)将用户名传过来 userSignIn(userName){ sessionStorage.userName = userName; this.userName = sessionStorage.userName; } }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
这样父组件就可以使用用户名,保持了登录状态,并且因为使用了sessionStorage,刷新页面也可以保持
相关文章推荐
- Vue中保存用户登录状态
- Vue中保存用户登录状态实例代码
- 使用cookie保存用户的登录状态——初步实现
- Servlet--保存cookie实现保存用户登录状态
- vuex + axios 做登录验证 并且保存登录状态的实例
- 使用session保存用户登录状态(实现单点登录)
- 微信小程序 获取用户信息并保存登录状态
- vue项目用户登录状态管理,vuex+localStorage实现
- Http请求保存用户的的登录状态
- vue路由跳转时 判断用户是否处于 登录状态
- 使用cookie保存用户的登录状态——初步实现
- 怎么保存Android端的用户登录状态
- asp.net保存用户登录状态
- nodejs基础教程-简单blog(5)-cookie保存用户登录状态
- JSP+Servlet实现用户登录状态的保存
- 保存用户登陆状态
- struts中登录后用户信息保存注意
- 让静态页面显示用户登录状态
- web验证用户登录状态
- WebContext获取用户登录状态显示隐藏控件