如何在 Vue ref 中存储 Firebase 9 onAuthStateChanged 用户对象？答案

【问题标题】：How do I store a Firebase 9 onAuthStateChanged user object in a Vue ref?如何在 Vue ref 中存储 Firebase 9 onAuthStateChanged 用户对象？
【发布时间】：2022-02-28 15:39:00
【问题描述】：

我在我的 Vue 3 / Quasar / TypeScript 应用程序中使用 Firebase 9。

这是我用来从 Firebase 获取用户的 getUser.ts 组合：

import { ref } from 'vue';
import { auth } from 'src/firebase/config';
import { User, onAuthStateChanged } from 'firebase/auth';

const user = ref<User | null>(auth.currentUser);

console.log('user.value in getUser', user.value); // <-- This returns null

onAuthStateChanged(auth, (_user) => {
  user.value = _user;
  console.log('user.value in getUser onAuthStateChanged', user.value); // <-- This returns a valid user object
});

const getUser = () => {
  return { user };
};

export default getUser;

这是我的 Pinia 商店，名为user.ts：

import { defineStore } from 'pinia';
import { LocalStorage } from 'quasar';
import useUser from 'src/composables/useUser';
import getUser from 'src/composables/getUser';
import getDocument from 'src/composables/getDocument';
import { User } from 'src/types';

const { updateUserProfile } = useUser();
const { user } = getUser();

console.log('user.value in user store', user.value); // <-- This returns null

let userObject = {};
if (user.value) {
  const { document: userDocument } = getDocument('users', user.value.uid);
  userObject = {
    firstName: userDocument.value?.firstName as string,
    lastName: userDocument.value?.lastName as string,
    displayName: user.value.displayName,
    photoURL: user.value.photoURL,
    email: user.value.email,
    phoneNumber: user.value.phoneNumber,
    uid: user.value.uid,
  };
}

const useUserStore = defineStore('user', {
  state: () => ({
    user: (LocalStorage.getItem('user') || userObject) as User,
  }),
  actions: {
    async setPhotoURL(photoURLData: string | undefined) {
      await updateUserProfile({ photoURL: photoURLData });
      this.user.photoURL = photoURLData;
    },
    setEmail(emailData: string) {
      this.user.email = emailData;
    },
    setPhone(phoneNumberData: string) {
      this.user.phoneNumber = phoneNumberData;
    },
  },
});

export default useUserStore;

onAuthStateChanged 中的 user.value 正确填充了 Firebase 用户对象。但其他 user.value 引用总是返回 null。

我做错了什么？

【问题讨论】：

您可以尝试按照此答案中的说明重构 getUser 函数吗？ stackoverflow.com/questions/69875003/… 本质上使用 onAuthStateChanged 并返回一个承诺
@Dharmaraj 我无法让它工作，因为我不知道如何在将 checkAuthState 添加到商店之前等待它。空存储总是在等待完成之前运行。介意发布如何让它与 Pinia 一起工作的答案吗？

标签： typescript vue.js firebase-authentication vuejs3 quasar-framework

【解决方案1】：

这是一个很好的例子，展示了如何将 Firebase v9 与 Vue 3 与 TypeScript 一起使用。 Quasar 与这个问题无关。

https://github.com/oless/firebase-v9-typescript-example

【讨论】：