Vue项目使用localStorage+Vuex保存用户登录信息

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}}