Vue + Pinia + Firebase 身份验证：在 Route Guard 之前获取 currentUser

Posted 2023-02-22

【中文标题】Vue + Pinia + Firebase 身份验证：在 Route Guard 之前获取 currentUser

【英文标题】：Vue + Pinia + Firebase Authentication: Fetch currentUser before Route Guard

【发布时间】：2021-09-28 16:11:05

【问题描述】：

最近我开始使用 Pinia 作为我的 Vue 3 项目的全球商店。我使用 Firebase 进行用户身份验证，并尝试在 Vue 初始化之前加载当前用户。理想情况下，与身份验证相关的所有内容都应与 Pinia Store 放在一个文件中。不幸的是（与 Vuex 不同）Pinia 实例需要传递给 Vue 实例之前我可以使用任何操作，我相信这是问题所在。首次加载时，存储中的 user 对象会暂时为空。

这是在auth.js 中绑定用户（使用新的 Firebase Web v9 Beta）的存储操作

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

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

【参考方案1】：

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

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

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

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