** 更新 ** 我让它与以下一起工作 **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
};
** 另一个问题 ** 像上面这样编码是好的做法吗
谢谢
最佳答案
即使 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));
关于javascript - auth.onAuthStateChanged 在 vue3 和 firebase 9.0.0 beta.3 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68070827/