Vue + Pinia + Firebase身份验证:在路由保护之前获取currentUser

Question

最近，我开始使用皮尼亚作为我的Vue 3项目的全球商店。我使用Firebase进行用户身份验证，并试图在初始化Vue之前加载当前用户。理想情况下，所有与auth相关的东西都应该放在一个带有Pinia商店的文件中。不幸的是(与Vuex不同)，Pinia实例需要在之前传递给Vue实例，我可以使用任何操作，我相信这就是问题所在。在第一次加载时，存储中的user对象在短时间内为空。

这是在auth.js中绑定用户(使用新的Firebase Web Web)的存储操作

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

这是我的main.js文件

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

在发生其他事情之前，我如何设置用户？

Answer 1

我想通了。必须在异步之后注册路由器

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

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

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