如何在類星體中處理firebase的onAuthStateChanged函數

Question

目前我正在為一些組件和 firebase 使用 tailwind css 和 headlessui。

現在我想使用 quasar 但引導文件對我來說非常神秘。

目前我用 config.js、main.js 和 pinia 商店管理 firebase。

我按照 Quasar 的建議用 firebase.js 引導文件替換了舊的 config.js 文件，它似乎可以工作。 （但我真的不知道這是否是好的做法）

import { boot } from 'quasar/wrappers'

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: 'xxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxxx',
  projectId: 'xxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxx',
  messagingSenderId: 'xxxxxxxxxxxxxx',
  appId: '1:xxxxxxxxxxxxxx'
}

// Init firebase
initializeApp(firebaseConfig)

// Init services
const db = getFirestore()
const auth = getAuth()
export { db, auth }

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async (/* { app, router, ... } */) => {
  // something to do
})

但我不知道如何處理 Quasar 中不再可用的舊 mains.js 文件。 在 main.js 中有以下代碼：

import { createApp, markRaw } from 'vue'
import router from './router/router'
import { createPinia } from 'pinia'

import App from './App.vue'

// firebase
import { auth } from './firebase/config'
import { onAuthStateChanged } from 'firebase/auth'

import './input.pcss'

let app

onAuthStateChanged(auth, () => {
  if (!app) {
    app = createApp(App)
      .use(
        createPinia().use(({ store }) => {
          store.$router = markRaw(router)
        })
      )
      .use(router)
      .mount('#app')
  }
})

我應該如何處理上面的代碼，尤其是onAuthStateChanged函數？

謝謝你的幫助

Answer 1

我找到了適合我目的的解決方案。 對我來說，要求是：

1. 在渲染之前，請確保在刷新時初始化身份驗證。
2. 在渲染之前，確保應用程序所需的任何數據也已初始化。
3. 檢測登錄、注銷和超時並采取相應措施。

我還沒有測試超時，但基本上我通過以下流程解決了這個問題。

1. 在您的router/index.js文件中，在每個函數之前添加一個，以檢查偵聽器是否處於活動狀態，如果沒有，則調用存儲函數來創建它。

 Router.beforeEach(async (to, from, next) => {
   // Access a store where you check if the auth changes are being handled
   const storeAuth = useAuth()
   if (!storeAuth.handlingAuth) {
     await storeAuth.handleAuth()
   }
   // Redirects as necessary using to.path and next
   next()
 })

2. 在 auth 商店中，創建一個函數，在beforeEach中返回一個等待等待的承諾。 就像是：

async handleAuth() {
 const auth = getAuth()
 return new Promise((resolve) => {
   let initialLoad = true
   auth.onAuthStateChanged(async (user) => {
     if (user) {
       await this.initializeUserData()
     } else {
       await this.clearUserData()
     }
     // If it is not initial load, use the router to push
     // depending on whether the user exists.
     // if (user && !initialLoad) this.router.push('/members')
     // This would detect a login and go to the members section.

     // If it is the initial load, resolve the promise
     // so the router proceeds
     if (initialLoad) {
       initialLoad = false
       this.handlingAuth = true
       resolve()
     }
   })
 })
}

3. 不要在 store 中使用useRouter()的錯誤。 useRouter()僅用於設置函數或<script setup> 。 您需要做的是將路由器作為插件添加到 Pinia。 所以在你的stores/index.js中導入你的路由器，然后添加：

pinia.use(({ store }) => { store.router = markRaw(router) })

這樣你就可以在你的商店模塊中使用this.router.push() 。

由於導航保護和存儲操作中的重定向，這可能看起來有點混亂，但這似乎是讓它從刷新和登錄加載所需數據的最簡單方法，同時僅在一個地方使用onAuthStateChanged 。

總之，它的工作原理如下：

1. 手動刷新或輸入 url 時，應用程序等待第一次狀態更改和任何必要的加載。
2. 然后在導航守衛中，您可以檢查檢查用戶登錄狀態和重定向所需的任何存儲變量。 就像回到登錄頁面一樣，如果用戶碰巧輸入了會員專區的 url。
3. 后續導航（非刷新）看到已經設置了身份驗證處理，因此將其忽略。
4. 當一個單獨的函數觸發登錄或注銷時，我們可以看到它不是初始加載，並在此時執行任何其他重定向。