Verwenden Sie Vue, Pinia und Firebase Authentication, um die aktuellen Benutzerinformationen vor dem Routenwächter abzurufen

Question

Vor kurzem habe ich begonnen, Pinia als globalen Speicher in meinem Vue 3-Projekt zu verwenden. Ich verwende Firebase zur Benutzerauthentifizierung und versuche, den aktuellen Benutzer zu laden, bevor Vue initialisiert wird. Idealerweise sollte sich alles, was mit der Authentifizierung zu tun hat, in einer separaten Datei im Pinia Store befinden. Leider muss (im Gegensatz zu Vuex) die Pinia-Instanz vor der Vue-Instanz übergeben werden, bevor ich eine Aktion ausführen kann, und ich denke, das ist das Problem. Beim ersten Laden ist das user-Objekt im Speicher kurzzeitig leer.

Dies ist die Speicheraktion, die den Benutzer (unter Verwendung der neuen Firebase Web v9 Beta) in auth.js bindet:

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()
        );
      });
    },
// ...
}})

Das ist meine main.js Datei:

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");
})();

Wie richte ich einen Benutzer ein, bevor etwas anderes passiert?

Answer 1

I figured it out. Had to register the router after the async stuff

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

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

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