使用Vue、Pinia和Firebase Authentication,在路由守卫之前获取当前用户信息
P粉538462187
P粉538462187 2023-11-06 20:43:59
[Vue.js讨论组]

最近我开始在我的Vue 3项目中使用Pinia作为全局存储。我使用Firebase进行用户身份验证,并尝试在Vue初始化之前加载当前用户。理想情况下,所有与身份验证相关的内容应该在一个单独的文件中,使用Pinia Store。不幸的是(与Vuex不同),在我使用任何action之前,Pinia实例需要在Vue实例之前传递,我认为这就是问题所在。在首次加载时,存储中的user对象短暂为空。

这是绑定用户的存储action(使用新的Firebase Web v9 Beta)在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()
        );
      });
    },
// ...
}})

这是我的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");
})();

如何在其他任何操作发生之前设置用户?

P粉538462187
P粉538462187

全部回复(1)
P粉795311321

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号