189 8069 5689
怎么在Vue项目中利用localStorage和Vuex保存用户登录信息？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联公司是一家集网站建设,相山企业网站建设,相山品牌网站建设,网站定制,相山网站建设报价,网络营销,网络优化,相山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
api.js
import axios from 'axios'
const baseURL = 'http://XXX
// 全局的 axios 默认值
axios.defaults.baseURL = baseURL
// 登录请求
const loginCheck = params => {
return axios.post('/login', params).then(res => {
return res.data
})
}
export { loginCheck }store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions = {}
const mutations = {
handleUserName: (state, user_name) => {
state.user_name = user_name
// 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值（初始值为空）的情况
localStorage.setItem('user_name', user_name)
}
}
const state = {
user_name: '' || localStorage.getItem('user_name')
}
// getters 只会依赖 state 中的成员去更新
const getters = {
userName: (state) => state.user_name
}
const store = new Vuex.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'
});
var that = 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 {
return false;
}
});
}
}Home.vue
您好，{{$store.getters.username}}看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。