VueJS und Firebase: Überprüfen Sie nach der Seitenaktualisierung, ob der Benutzer angemeldet ist

Question

Ich entwickle eine Webanwendung mit Vue 3 und dem Firebase-Framework. Als Ströme verwende ich Pinia. Zur Authentifizierung verwende ich Firebase und bisher funktioniert es hervorragend, Benutzer können sich registrieren und anmelden. Sobald sich ein Nutzer anmeldet, werden seine Daten im pinia-Speicher gespeichert.

Sobald sich der Benutzer jedoch anmeldet und die Seite neu lädt, gehen die Daten im Pinia-Speicher verloren. Wenn ich die Firebase-Funktion onAuthStateChanged() verwende, ist der Benutzer weiterhin angemeldet.

Meine erste Lösung bestand darin, die Funktion onAuthStateChanged() jedes Mal aufzurufen, wenn die App gestartet wird und der Pinia-Store mit den erforderlichen Daten gefüllt wird. Ich habe versucht, die Funktion onAuthStateChanged() in der Firebase-Konfigurationsdatei aufzurufen, aber der Pinia-Store wurde dort noch nicht initialisiert.

An welcher Stelle in der Vue-Anwendung muss ich die Funktion onAuthStateChanged() aufrufen, damit der Benutzer nach einer Aktualisierung automatisch angemeldet wird und ich Benutzerdaten in den Pinia-Speicher schreiben kann? ?

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 = ...
    }
  }
});