Gunakan Vue, Pinia dan Firebase Authentication untuk mendapatkan maklumat pengguna semasa sebelum pengawal laluan

Question

Baru-baru ini saya mula menggunakan Pinia sebagai storan global dalam projek Vue 3 saya. Saya menggunakan Firebase untuk pengesahan pengguna dan cuba memuatkan pengguna semasa sebelum Vue dimulakan. Sebaik-baiknya, semua yang berkaitan dengan pengesahan harus berada dalam fail berasingan, menggunakan Pinia Store. Malangnya (tidak seperti Vuex), instance Pinia perlu diluluskan sebelum instance Vue sebelum saya boleh menggunakan sebarang tindakan, dan saya rasa itulah masalahnya. Pada beban pertama, objek user dalam storan kosong seketika.

Ini ialah tindakan storan yang mengikat pengguna (menggunakan Firebase Web v9 Beta baharu) dalam 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()
        );
      });
    },
// ...
}})

Ini ialah fail main.js saya:

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

Bagaimana untuk menyediakan pengguna sebelum perkara lain berlaku?

Answer 1

Saya faham. Terpaksa mendaftar penghala selepas perkara async

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

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

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