Ant Design Pro Vue 登录后userInfo存在vuex问题

问题描述：

作者发现使用Ant Design Pro中存在一个问题，页面刷新后vuex数据丢失，导致UserInfo找不到影响页面的问题，故而写此文，望能助有需之人。

---

原因分析：

提示：Vuex的机制问题

vuex是存在浏览器页面内存的数据，所以刷新后就没有了，虽然很多人认为存在localstorage或者sessionstorage内不安全，但作者还是习惯存在浏览器内存。

---

解决方案：

1.src/store/modules/user.js Login方法内存在LocalStorage中

2.src/permission.js 对应调整

作者的做法是让每一次原项目中的获取getInfo接口至vuex的机制，改为从localstorage中获取，是不是非常的机灵鬼呢 *~*

user.js

    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const result = response.data
          storage.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
          storage.set(REFRESH_TOKEN, result.refresh, 7 * 24 * 60 * 60 * 1000)
          storage.set(USER_INFO,result.userInfo,7 * 24 * 60 * 60 * 1000)
          commit('SET_INFO', result.userInfo)
          commit('SET_TOKEN', result.token)
          commit('SET_NAME', { name: result.userInfo.name, welcome: welcome() })
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

 permission.js

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`)
  /* has token */
  console.log(store);
  if (storage.get(ACCESS_TOKEN) && storage.get(USER_INFO)) {  //是否存在token和UserInfo
    // 每次变动都存储到vuex中
    store.commit('SET_INFO', storage.get(USER_INFO))
    store.commit('SET_TOKEN', storage.get(ACCESS_TOKEN))
    store.commit('SET_NAME', { name: storage.get(USER_INFO).name, welcome: welcome() })
    next()
  } else {
    if (allowList.includes(to.name)) {
      // 在免登录名单，直接进入
      next()
    } else {
      next({ path: loginRoutePath, query: { redirect: to.fullPath } })
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

去尝试吧。