VueJS 和 firebase：页面刷新后检查用户是否登录

Question

我正在使用 Vue 3 和 firebase 框架开发一个 Web 应用程序。作为 stroe，我使用 Pinia。对于身份验证，我使用 firebase，到目前为止效果很好，用户可以注册并登录。用户登录后，他的数据就会存储在 pinia 存储中。

但是，一旦用户登录并重新加载页面，pinia 存储中的数据就会丢失。如果我使用 firebase 函数 onAuthStateChanged() ，仍然有用户登录。

我的第一个解决方案是每次启动应用程序时调用 onAuthStateChanged() 函数，然后 pinia 存储会填充所需的数据。我已经尝试在 firebase 配置文件中调用 onAuthStateChanged() 函数，但 pinia 存储尚未在此处初始化。

Vue 应用程序中的哪个点必须调用 onAuthStateChanged() 函数，以便用户在刷新后自动登录，并且我可以将用户数据写入 Pinia 存储？

Answer 1

我不确定您尝试过什么，但我知道这会起作用。当然，您可以将 onAuthStateChanged 移出您的商店，它仍然可以工作。请记住，您必须使用观察者或计算道具来跟踪 store.user 并更新 UI。

import { getAuth, onAuthStateChanged } from 'firebase/auth';

const auth = getAuth();
onAuthStateChanged(auth, async () => {
  const store = useStore();
  store.setUser();
});


const useStore = defineStore('store', {
  state: () => ({ 
    user: null
  }),
  actions: {
    setUser() {
      // Set user here
      // this.user = ...
    }
  }
});