Nuxt-页面刷新时获取生命周期挂钩的行为

Question

我不确定这是否是预期的行为，但总之，我在刷新页面后无法从Firebase读取通用模式Nuxt应用程序。这是因为请求来自服务器，因此被Firebase视为未经身份验证的用户。我通过在受影响的页面上强制使用SPA模式来解决此问题，并且它可以工作，但是我不喜欢将其作为解决方案。

原因是我正在/正在使用Firebase客户端库（因此从客户端进行调用）。我正在使用Nuxt的fetch()挂钩来调用读取操作。我使用客户端库的原因是（我天真的）认为这对于页面性能更好。

要停止刷新失败，我（据信）应该按照Nuxt docs将fetchOnServer: false附加到获取钩子上。

但是这不能解决问题。

我怀疑这是因为刷新没有像通过Nuxt路由器导航到页面一样调用Nuxt / Vue函数。它是否正确？ （即使fetchOnServer设置为False，我也可以看到fetch()仍会导致服务器端对Firebase的请求失败，正如预期的那样）。除了如上所述在页面上强制执行SPA之外，还有其他解决方法吗？如果没有，我可以考虑使用Firebase-Admin库。

赞赏对此的任何反馈。

编辑：这是我当前以SPA模式运行的示例查询-这将返回允许给定用户访问的所有事件。结果将返回给Vuex，以进行客户端渲染：）

  async getListOfEvents(uid) {
    fireDb = firebase.firestore()
    await firebase.auth().currentUser
    const pList = fireDb
      .collection('presentations')
      .where('usersWithPerms', 'array-contains', uid)
      .where('status', '==', 'ACTIVE-VISIBLE')
    try {
      const messageDoc = await pList.get()
      const aVP = []
      let rObj = {}
      messageDoc.forEach(function (childSnapshot) {
        const o = childSnapshot.data()
        rObj.pName = o.eventName
        rObj.synopsis = o.synopsis
        rObj.urlSlug = o.urlSlug
        rObj.owner = o.owner === uid
        aVP.push(rObj)
        rObj = {}
      })
      return aVP
    } catch (e) {
      console.log(`Error during getting LIST of events! ${e}`)
    }
  },```

Answer 1

我不知道我是否完全理解您的问题，但我想您只想从Firebase上特定页面上的客户端上获取数据。

因此，您可以这样做：在某些vue lifeCycle方法（例如created（）或Mounted（））上调用您的方法，并添加process.browser验证。像这样的东西：

created() {
  if (process.browser) {
    // fetch from firebase
  }
}

Answer 2

所以最后解决此问题的最干净的方法是继续使用'Nuxt Firebase'https://firebase.nuxtjs.org/guide/getting-started/

它需要服务人员，因此Nuxt PWA才能正常工作，但是结果非常令人满意。

我也不是很欣赏您启用的Firebase服务在使用此功能的全球范围内的事实，但是到目前为止，我发现对应用程序性能的负面影响很小。 （通过Lighthouse运行测试）