Nuxt.js 插件，用於 Firebase - 服務器端

Question

我正在嘗試將 Nuxt 2.14 與 firebase 火庫連接
我正在為在服務器上運行的 firebase 編寫一個插件
我正在使用“注入”將firebase.firestore() object 作為數據庫傳遞。

但是，當我使用剛剛注入的 $db
並嘗試通過 asyncData 使數據變量等於 $db，

我收到一個錯誤：
“超出最大調用堆棧大小”

我猜 firebase.firestore() object 有一個“圓形結構”
有什么建議么？
我應該以不同的方式處理這個問題嗎？
謝謝

這是我正在使用的不同文件的代碼：

.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 auth 和 firestore 將固有地暴露 API 密鑰客戶端，因為他們仍然需要在那里使用它來與 Firebase 通信。

此外，使用循環引用傳回 object 不起作用，因為 Vue 無法正確序列化它，並且也不知道如何在客戶端上反序列化它。

如果您只是在頁面加載時從 Firebase 獲取數據，那么您應該在 asyndData 方法中執行此操作，並返回獲取的數據。 但是，如果您需要在運行時進行調用，例如存儲用戶數據，那么您將需要一個 API 來保證密鑰的安全。 我通常建議從 Nuxts serverMiddleware開始，因為它在 Nuxt 項目上開箱即用。