Question

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

发生这种情况的原因是，我/正在使用Firebase客户端库（因此从客户端进行调用）。我正在使用Nuxt的import { Hero } from '../hero';挂钩来调用read动作。我使用客户端库的原因是（我天真的）认为这对于页面性能更好。

要停止刷新失败，我应该（根据我的看法）按照Nuxt文档将fetch()附加到获取钩子上。

但是，这不能解决问题。

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

感谢对此的任何反馈。

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

fetch()

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运行测试）

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

2 个答案: