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，刷新页面也可以保持。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍spring aop action中验证用户登录状态的实例代码，包括了spring aop action中验证用户登录状态的实例代码的使用技巧和注意事项，需要的朋友参考一下 最近在学习ssh框架时，照着网上做了一个商城系统，之前在一些需要用户存在的操作中，都是在每一个action中写重复的代码，这样做现在想起来并不好，想起了spring的aop，于是想通过aop来给每个需要用户操作的
-
本文向大家介绍Android 保存Fragment 切换状态实例代码，包括了Android 保存Fragment 切换状态实例代码的使用技巧和注意事项，需要的朋友参考一下 前言 一般频繁切换Fragment会导致频繁的释放和创建，如果Fragment比较臃肿体验就非常不好了，这里分享一个方法。 正文 一、应用场景 1、不使用ViewPager 2、不能用replace来切换Fragm
-
本文向大家介绍vue router 用户登陆功能的实例代码，包括了vue router 用户登陆功能的实例代码的使用技巧和注意事项，需要的朋友参考一下 有些路由页面需要用户登陆之后才能访问如（用户中心），如果用户没有登陆就访问这些页面的话就应该转换到登陆页面，登陆成功之后在进入该页面。 需要用到的知识点有：H5中的会话存储（sessionStorage）、vue-router路由前置操作、路由元信
-
本文向大家介绍vue-router beforeEach跳转路由验证用户登录状态，包括了vue-router beforeEach跳转路由验证用户登录状态的使用技巧和注意事项，需要的朋友参考一下 使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子，包含路由进入前，进入后，更新时，退出前等几个周期，主要用于控制导航的前进后退或跳转等。 其中router.beforeEach就是路由进入前的周
-
本文向大家介绍Vue 使用beforeEach实现登录状态检查功能，包括了Vue 使用beforeEach实现登录状态检查功能的使用技巧和注意事项，需要的朋友参考一下 使用VueRouter的beforeEach钩子函数，可以实现导航跳转前检查登录状态的需求。 1.在登录请求接口时返回用户的信息，比如 userInfo:{userId:'123', userName:'小明'}，登录成功之后将us
-
本文向大家介绍vue+axios实现登录拦截的实例代码，包括了vue+axios实现登录拦截的实例代码的使用技巧和注意事项，需要的朋友参考一下 一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。