javascript - auth.onAuthStateChanged 在 vue3 和 firebase 9.0.0 beta.3 上不起作用

Question

** 更新 **我让它与以下一起工作**main.js **

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { onAuthStateChanged} from "firebase/auth";
import { auth } from './firebase'

let app
onAuthStateChanged(auth, (user) => {
  if (!app) {
    app = createApp(App).use(store).use(router).mount('#app')
  }

  if (user) {
    //store.dispatch('fetchUserProfile', user)
  }
})

** firebase.js **

// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from 'firebase/app';

// Add the Firebase products that you want to use
import { getAuth } from "firebase/auth";
import { getFirestore, collection } from 'firebase/firestore';

const firebaseConfig = {
  // config settings
};
const firebaseApp = initializeApp(firebaseConfig);
// utils
const db = getFirestore();
const auth = getAuth(firebaseApp)
// collection references
const usersCollection = collection(db, "users")
const postsCollection = collection(db, "posts")
const commentsCollection = collection(db, "comments")
const likesCollection = collection(db, "likes")
export {
  db,
  auth,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
};

** 当创建 vue3 和 npm run 服务时它工作。**

但是当将 auth.onAuthStateChanged 添加到 main.js 和 npm run serve 时，它​​会显示空白页面。我已经尝试了 auth.auth().onAuthStateChanged 没用

** main.js **

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth } from './firebase'

let app
auth.onAuthStateChanged(user => {
  if (!app) {
    app = createApp(App).use(store).use(router).mount('#app')
  }

  if (user) {
    //store.dispatch('fetchUserProfile', user)
  }
})

** firebase.js **

/* eslint-disable */
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';


const firebaseConfig = {
  //... config
};
firebase.initializeApp(firebaseConfig);

// utils
const db = firebase.firestore();
const auth = firebase.auth();
const authProvider = firebase.auth;

// collection references
const usersCollection = db.collection('users');
const postsCollection = db.collection('posts');
const commentsCollection = db.collection('comments');
const likesCollection = db.collection('likes');

// export utils/refs
export {
  db,
  auth,
  authProvider,
  firebase,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
};

** 我尝试了另一种方法但没有成功 **

** main.js **

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth, authState } from './firebase';

let app
authState(auth, (user) => {
  if (!app) {
    app = createApp(App).use(store).use(router).mount('#app')
  }

  if (user) {
    //store.dispatch('fetchUserProfile', user)
  }
})

** firebase.js**

// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from 'firebase/app';

// Add the Firebase products that you want to use
import { getAuth, onAuthStateChanged, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  \\ config
};
const firebaseApp = initializeApp(firebaseConfig);

// utils
const db = getFirestore();
const auth = getAuth();
const authState = onAuthStateChanged();
const googleAuthProvider = GoogleAuthProvider();

// collection references
const usersCollection = db.collection('users');
const postsCollection = db.collection('posts');
const commentsCollection = db.collection('comments');
const likesCollection = db.collection('likes');

// export utils/refs
export {
  db,
  auth,
  authState,
  googleAuthProvider,
  firebaseApp,
  usersCollection,
  postsCollection,
  commentsCollection,
  likesCollection
};

** 另一个问题 **像上面这样编码是好的做法吗

谢谢

Answer 1

即使 OP 已经解决了，我也会回答这个问题。

您必须将 firebaseApp 实例传递给 Firebase 9.0 中的 getAuth 函数。这是因为您可能在同一应用中使用不同的 firebase 实例。

示例代码:

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";

var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  ...
};

const firebaseApp = initializeApp(firebaseConfig);
const authInstance = getAuth(firebaseApp);

onAuthStateChanged(authInstance, user => console.log(user));