Nuxt SSR刷新浏览器时Vuex fetch拉取数据未更新问题

问题现象 #

• 页面通过nuxt-link做客户端跳转时，接口数据可以正常加载，Vuex中bots状态正常；
• 直接刷新浏览器页面时，Vuex内的bots状态为空，数据未正常写入。

关联代码 #

页面组件代码 #

async fetch(){ 
  await this.$store.dispatch('bots/getBots') 
},
computed: { 
  ...mapState('bots', ['bots']) 
},

Vuex Store代码 #

export const state = () => {
  return {
    bots: []
  }
}

export const mutations = {
  UPDATE_BOTS(state, bots) {
    state.bots = bots
  }
}

export const actions = {
  getBots({commit}) {
    this.$axios.$get('url', {headers: {uid: '12345'}})
      .then(res => {
        commit('UPDATE_BOTS',res.robots)
      })
      .catch(e => {
        console.log(e)
      })
  }
}

排查过程 #

• 项目里接入了nuxt-auth模块，之前自己写了个axios请求状态校验插件：逻辑是接口返回401 Unauthorized状态时，如果用户正处于登录状态就自动执行登出操作，最开始碰到的status undefined报错就是这个自定义插件抛出来的。
• 把这个自定义插件的代码注释掉之后进一步排查，才确认问题根源出在nuxt-auth模块本身：该模块会对所有携带headers配置的GET请求强制做授权字段校验，触发异常直接打断请求流程。刷新页面时fetch钩子是在服务端渲染阶段执行的，请求被打断就没法提交mutation更新Vuex里的bots数据，最终表现为刷新后状态为空。

内容的提问来源于stack exchange，提问作者Mehdi Rafiee