Firebase 的 Nuxt.js 插件 - 服务器端

Question

我正在尝试将 Nuxt 2.14 与 firebase firestore 连接
我正在编写一个在 服务器
上运行的 firebase 插件 我正在使用“注入”将firebase.firestore() 对象作为数据库传递。

但是，当我使用刚刚注入的 $db 时
并尝试通过 asyncData 使数据变量等于 $db，

我收到一个错误：
"超过最大调用堆栈大小"

我猜 firebase.firestore() 对象有一个“圆形结构”
有什么建议吗？
我应该以不同的方式处理这个问题吗？
谢谢

这是我正在使用的不同文件的代码：

.env

FB_DB_PATH=XXXXXX
FB_API_KEY=YYYYYY
FB_PROJECT_ID=ZZZZZZ
FB_AUTH_DOMAIN=EEEEEEE

nuxt.config.js

plugins: [
    { src: '~plugins/firebase.js', mode: 'server' }, 
    // runs on server to get the firebase privateRuntimeConfig params

],
  
publicRuntimeConfig: {
  baseURL: process.env.BASE_URL // just for test
    
},
privateRuntimeConfig: {
  fbProjectID: process.env.FB_PROJECT_ID,
  fbDBPath: process.env.FB_DB_PATH,
  fbApiKey: process.env.FB_API_KEY,
  fbAuthDomain: process.env.FB_AUTH_DOMAIN
},

firebase.js - 这是插件文件

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

export default function (context, inject) {
   
  if (!firebase.apps.length) {

    firebase.initializeApp({
      apiKey: context.$config.fbApiKey,
      authDomain: context.$config.fbAuthDomain,
      //databaseURL: context.$config.fbDBPath,
      projectId: context.$config.fbProjectID
    })
    
  }
  
 let auth = firebase.auth();
 let db = firebase.firestore();

 inject('db', db);
}

在页面代码中：

asyncData ( context ) {
      return { db: context.$db }
}

Answer 1

AFAIK，您尝试执行的操作不起作用，而且无论如何也不安全。注入您的 Firebase 身份验证和 Firestore 将固有地暴露 API 密钥客户端，因为它们仍然需要在那里使用它来与 Firebase 通信。

此外，用循环引用传回一个对象是行不通的，因为 Vue 无法正确序列化它，也不知道如何在客户端反序列化它。

如果您只是在页面加载时从 Firebase 获取数据，那么您应该在 asyndData 方法中执行此操作，并返回获取的数据。但是，如果您需要在运行时进行调用，例如存储用户数据，那么您将需要一个 API 来保证密钥的安全。我通常建议从 Nuxts serverMiddleware 开始，因为它在 Nuxt 项目中开箱即用。