Utilisez l'authentification Vue, Pinia et Firebase pour obtenir les informations actuelles de l'utilisateur avant le garde-route

Question

Récemment, j'ai commencé à utiliser Pinia comme stockage global dans mon projet Vue 3. J'utilise Firebase pour l'authentification des utilisateurs et j'essaie de charger l'utilisateur actuel avant l'initialisation de Vue. Idéalement, tout ce qui concerne l'authentification devrait être dans un fichier séparé, en utilisant Pinia Store. Malheureusement (contrairement à Vuex), l'instance Pinia doit être passée avant l'instance Vue avant de pouvoir utiliser une action, et je pense que c'est là le problème. Lors du premier chargement, l'objet user stocké est brièvement vide.

Il s'agit de l'action de stockage qui lie l'utilisateur (en utilisant la nouvelle version bêta de Firebase Web v9) dans auth.js :

import { defineStore } from "pinia";
import { firebaseApp } from "@/services/firebase";
import {
  getAuth,
  onAuthStateChanged,
  getIdTokenResult,
} from "firebase/auth";

const auth = getAuth(firebaseApp);

export const useAuth = defineStore({
  id: "auth",
  state() {
    return {
      user: {},
      token: {},
    };
  },
  actions: {
    bindUser() {
      return new Promise((resolve, reject) => {
        onAuthStateChanged(
          auth,
          async (user) => {
            this.user = user;
            if (user) this.token = await getIdTokenResult(user);
            resolve();
          },
          reject()
        );
      });
    },
// ...
}})

Voici mon main.jsfichier :

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
import { useAuth } from "@/store/auth";

(async () => {
  const app = createApp(App).use(router).use(createPinia());
  const auth = useAuth();
  auth.bindUser();
  app.mount("#app");
})();

Comment configurer un utilisateur avant que quoi que ce soit d'autre n'arrive ?

Answer 1

J'ai compris. J'ai dû enregistrer le routeur après les trucs asynchrones

//main.js
(async () => {
  const app = createApp(App);

  app.use(createPinia());
  const { bindUser } = useAuth();
  await bindUser();

  app.use(router);
  app.mount("#app");
})();