在nuxtServerInit中将存储与Cookie同步-NuxtJS

时间:2019-09-23 15:08:12

标签: javascript vue.js nuxt.js nuxt

我正在使用NuxtJS的auth模块,并尝试获取Bearer令牌和包含nuxtServerInit上的sessionType的自定义cookie,因此我可以用store更新mutation,但仅在我重新加载页面。

如果我关闭浏览器并直接转到我的应用程序URL,由于nuxtServerInit在cookie准备就绪之前执行,我对auth._token.local的定义一直未定义。

我在store / index.js中的代码如下:

export const actions = {
  async nuxtServerInit({ commit, dispatch }, { req }) {
    // Parse cookies with cookie-universal-nuxt
    const token = this.$cookies.get('token')
    const sessionType = this.$cookies.get('sessionType')

   // Check if Cookie user and token exists to set them in 'auth'
    if (token && user) {
      commit('auth/SET_TOKEN', token)
      commit('auth/SET_SESSION_TYPE', user)
    }
  }
}

我正在使用nuxt-universal-cookies库。

将Cookie加载到浏览器后,执行操作的方式是什么?

2 个答案:

答案 0 :(得分:1)

让它与F5一起使用而不是按回车键使我怀疑它有时有时甚至不起作用,因为F5Enter应该在Nuxt上触发相同的行为(除了某些行为)缓存标题)。

关于您代码的唯一可疑之处是当函数不返回或未等待任何诺言时使用async函数。

因此,您await换了action

export const actions = {
  async nuxtServerInit({ commit, dispatch }, { req }) {
    // Parse cookies with cookie-universal-nuxt
    const token = this.$cookies.get('token')
    const sessionType = this.$cookies.get('sessionType')

   // Check if Cookie user and token exists to set them in 'auth'
    if (token && user) {
      await dispatch('SET_SESSION', {token, user})
      //commit('auth/SET_TOKEN', token)
      //commit('auth/SET_SESSION_TYPE', user)
    }
  }
}

或者您从声明中删除异步

export const actions = {
  nuxtServerInit({ commit, dispatch }, { req }) {
    // Parse cookies with cookie-universal-nuxt
    const token = this.$cookies.get('token')
    const sessionType = this.$cookies.get('sessionType')

   // Check if Cookie user and token exists to set them in 'auth'
    if (token && user) {
      commit('auth/SET_TOKEN', token)
      commit('auth/SET_SESSION_TYPE', user)
    }
  }
}

答案 1 :(得分:0)

我遇到了同样的问题,发现nuxtServerInit是在像通过快速中间件一样设置cookie之前首先触发的。