时间戳

首页 > 解决方案 > Nuxt - 页面刷新时获取生命周期挂钩的行为

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

问题描述

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

发生这种情况的原因是我正在/正在使用 Firebase 客户端库（因此从客户端进行调用）。我正在使用 Nuxt 的fetch()钩子来调用读取操作。我使用了客户端库，因为我（也许天真地）认为这对页面性能更好。

为了停止刷新失败，我应该（我相信）fetchOnServer: false按照 Nuxt 文档附加到 fetch 挂钩。

但是，这并不能解决问题。

我怀疑这是因为刷新没有像通过 Nuxt 路由器导航到页面那样调用 Nuxt/Vue 功能。这个对吗？（我可以看到即使fetchOnServer设置为 Falsefetch()仍然会导致服务器端向 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}`)
    }
  },```

标签： nuxt.js

解决方案

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

所以，你可以这样做：在一些 vue lifeCycle 方法上调用你的方法，比如 created() 或 mount() 并添加process.browser验证。像这样的东西：

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

推荐阅读