gpt4 book ai didi

firebase - Vue + Pinia + Firebase 身份验证 : Fetch currentUser before Route Guard

转载 作者:行者123 更新时间:2023-12-05 01:28:31 30 4
gpt4 key购买 nike

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

这是在 auth.js

中绑定(bind)用户的存储操作(使用新的 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");
})();

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

最佳答案

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

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

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

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

关于firebase - Vue + Pinia + Firebase 身份验证 : Fetch currentUser before Route Guard,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68466874/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com