VueJS et Firebase : vérifiez si l'utilisateur est connecté après l'actualisation de la page

Question

Je développe une application Web utilisant Vue 3 et le framework Firebase. En guise de stroe, j'utilise Pinia. Pour l'authentification, j'utilise Firebase et jusqu'à présent, cela fonctionne très bien, les utilisateurs peuvent s'inscrire et se connecter. Une fois qu'un utilisateur se connecte, ses données sont stockées dans le stockage Pinia.

Cependant, une fois que l'utilisateur se connecte et recharge la page, les données stockées dans le stockage Pinia sont perdues. Si j'utilise la fonction Firebase onAuthStateChanged()

Ma première solution consistait à appeler la fonction onAuthStateChanged() à chaque fois que l'application est lancée et que le magasin pinia est rempli avec les données requises. J'ai essayé d'appeler la fonction onAuthStateChanged() dans le fichier de configuration Firebase, mais le magasin pinia n'y a pas encore été initialisé.

À quel moment de l'application Vue dois-je appeler la fonction onAuthStateChanged() afin que l'utilisateur soit automatiquement connecté après une actualisation et que je puisse écrire les données utilisateur sur le stockage Pinia ?

Answer 1

Je ne suis pas sûr de ce que vous avez essayé, mais je sais que cela fonctionnera. Bien sûr, vous pouvez déplacer AuthStateChanged hors de votre magasin et cela fonctionnera toujours. N'oubliez pas que vous devez utiliser des observateurs ou des accessoires calculés pour suivre store.user et mettre à jour l'interface utilisateur.

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