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

 
 

转自：https://blog.csdn.net/it_cgq/article/details/83932887