VueJS 和 firebase：頁面刷新後檢查使用者是否登入

Question

我正在使用 Vue 3 和 firebase 框架開發一個 Web 應用程式。作為 stroe，我使用 Pinia。對於身份驗證，我使用 firebase，到目前為止效果很好，用戶可以註冊並登入。使用者登入後，他的資料就會儲存在 pinia 儲存體中。

但是，一旦使用者登入並重新載入頁面，pinia 儲存中的資料就會遺失。如果我使用 firebase 函數 onAuthStateChanged() ，仍然有使用者登入。

我的第一個解決方案是每次啟動應用程式時呼叫 onAuthStateChanged() 函數，然後 pinia 儲存體會填入所需的資料。我已經嘗試在 firebase 設定檔中呼叫 onAuthStateChanged() 函數，但 pinia 儲存尚未在此處初始化。

Vue 應用程式中的哪個點必須調用 onAuthStateChanged() 函數，以便用戶在刷新後自動登錄，並且我可以將用戶資料寫入 Pinia 儲存？

Answer 1

我不確定您嘗試過什麼，但我知道這會起作用。當然，您可以將 onAuthStateChanged 移出您的商店，它仍然可以工作。請記住，您必須使用觀察者或計算道具來追蹤 store.user 並更新 UI。

import { getAuth, onAuthStateChanged } from 'firebase/auth';

const auth = getAuth();
onAuthStateChanged(auth, async () => {
  const store = useStore();
  store.setUser();
});


const useStore = defineStore('store', {
  state: () => ({ 
    user: null
  }),
  actions: {
    setUser() {
      // Set user here
      // this.user = ...
    }
  }
});