Vue项目使用localStorage+Vuex保存用户登录信息
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码，供大家参考，具体内容如下
api.js
importaxiosfrom'axios'
constbaseURL='http://XXX
//全局的axios默认值
axios.defaults.baseURL=baseURL
//登录请求
constloginCheck=params=>{
returnaxios.post('/login',params).then(res=>{
returnres.data
})
}
export{loginCheck}
store.js
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
constactions={}
constmutations={
handleUserName:(state,user_name)=>{
state.user_name=user_name
//把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值（初始值为空）的情况
localStorage.setItem('user_name',user_name)
}
}
conststate={
user_name:''||localStorage.getItem('user_name')
}
//getters只会依赖state中的成员去更新
constgetters={
userName:(state)=>state.user_name
}
conststore=newVuex.Store({
actions,
mutations,
state,
getters
})
export{store}
login.vue
methods:{
login(formName){
this.$refs[formName].validate((valid)=>{
if(valid){
//调用登录请求接口
loginCheck(this.form).then(res=>{
//console.log(res);
//登录成功,提示成功信息，然后跳转到首页，同时将token保存到localstorage中,将登录名使用vuex传递到Home页面
if(res.meta.status===200){
//提示成功信息
this.$message({
message:res.meta.msg,
type:'success'
});
varthat=this;
//跳转到首页
setTimeout(function(){
that.$router.push({name:'Home'})
},1000)
localStorage.setItem('token',res.data.token)
//将登录名使用vuex传递到Home页面
this.$store.commit('handleUserName',res.data.username);
}else{
//登录失败，就提示错误信息
this.$message({
message:'登录失败,'+res.meta.msg,
type:'error'
});
}
})
}else{
returnfalse;
}
});
}
}
Home.vue
您好，{{$store.getters.username}}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。