Firebase Auth Web：注銷並重新加載頁面

Question

我在 VueJS 中使用 Firebase。 到目前為止，注冊、登錄工作正常，但一旦我用 F5 重新加載頁面或直接寫入瀏覽器地址欄加載頁面，然后 auth session 被終止，用戶不再登錄。 只要我不重新加載頁面，它就可以正常工作，即使我單擊路由鏈接或被重定向到其他頁面，用戶 session 仍然存在。 順便說一句，我在哪里重新加載頁面並不重要。

我的登錄方式：

firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
                    (user) => {
                        if (user.emailVerified === false) {
                            firebase.auth().signOut()
                        } else {
                            // redirect to lobby page if user is verified and signed in
                            this.$router.push('/lobby')
                        }
                    },
                    function(err) {
                        console.log(err.message)
                    }
                )

Answer 1

您需要調用firebase.auth().onAuthStateChanged來檢測用戶是否已登錄。

身份驗證狀態更改時，將在UI線程中調用此方法：

• 在注冊聽眾之后

• 用戶登錄后

• 當前用戶退出時

• 當前用戶更改時

資源

用法示例如下所示：

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    if (user.emailVerified === false) {
      firebase.auth().signOut()
    } else {
      this.$router.push('/lobby')
    }
  } else {
    // will get to here from a logout event
    // this.$router.push('/login')
  }
}

Answer 2

在您的 main.js 文件中使用它：

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

Firebase 將在創建 Vue 應用程序之前運行。