vue.js - 如何确保 Vue 在登录成功后立即获取到 localStorage 中的值？

Question

由于登录成功后马上跳转回主页，导致存localStorage操作与路由跳转几乎同时进行，所以跳转回主页后，localStorage还没有存入完成，获取不到用户信息，只有在刷新一下才能获取到值，如何在登陆成功后获取到呢？

user.js里面将用户信息存储到localStorage中：

const actions = {  getUserInfo({    commit,    dispatch,    state  }) {    axios({      method: 'get',      url: '/gateway/api/userInfo',      headers: {        'admin-gateway-token': state.token      }    }).then(res => {      const {        data,        code,        msg      } = res.data      if (code === 0) {        localStorage.setItem('userInfo', data.username)        commit('SET_USERINFO', data)      } else {        console.log('获取人员信息失败：', res)        if (res.data.code === 2000) {          dispatch('app/logOut', {}, {            root: true          })        }        Message({          type: 'error',          message: '获取人员信息失败：' + msg        })      }    }, res => {      Message({        type: 'error',        message: '获取人员信息失败：' + res      })    })  },

Answer 1

用 await 等这块逻辑执行完再跳转不行么

Answer 2

你都用 store 了，设置 localStorage 的时候同时也操作修改一下 state 的值不行么……为啥一定要用 ls 绕一下。

Answer 3

你的问题是在登录成功后，你希望立即获取到 localStorage 中的值，但因为同时发生了路由跳转和 localStorage 的存储操作，导致在跳转回主页时 localStorage 还没有存入完成，所以获取不到用户信息。

一种可能的解决方案是使用 Vuex。Vuex 是 Vue.js 的状态管理库，它允许你在全局范围内管理应用的状态。在你的情况下，你可以在 Vuex store 中存储用户信息，并在登录成功后立即更新这个状态。

以下是如何使用 Vuex 来解决你的问题的示例：

首先，在 Vuex store 中添加一个新的模块来存储用户信息：

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    userInfo: null  },  mutations: {    SET_USERINFO(state, userInfo) {      state.userInfo = userInfo    }  },  actions: {    getUserInfo({ commit }) {      axios({        method: 'get',        url: '/gateway/api/userInfo',        headers: {          'admin-gateway-token': this.$store.state.token        }      }).then(res => {        const { data, code, msg } = res.data        if (code === 0) {          commit('SET_USERINFO', data)        } else {          console.log('获取人员信息失败：', res)          if (res.data.code === 2000) {            this.$store.dispatch('app/logOut', {}, { root: true })          }          Message({ type: 'error', message: '获取人员信息失败：' + msg })        }      }, res => {        Message({ type: 'error', message: '获取人员信息失败：' + res })      })    }  }})

然后，在你的组件中，你可以通过 this.$store.state.userInfo 来访问用户信息。并且，由于你在 Vuex store 中更新了用户信息，它将在登录成功后立即可用，无论是否发生了路由跳转。例如：

// MyComponent.vueexport default {  mounted() {    if (this.$store.state.userInfo) {      console.log('用户信息：', this.$store.state.userInfo)    } else {      console.log('用户信息尚未获取')    }  }}