Vuejs：如何在使用Firebase進行身份驗證後轉到頁面

我有一個vue 2 +路由器設置。所有似乎都工作正常。現在，我想在使用Firebase進行身份驗證後進入我網站的第一頁。我進行身份驗證，驗證電子郵件，並希望通過「vue way」進入該網站。

我有點卡在這裏。出現錯誤：未定義推送。假設這將帶我到正確的組成部分。

Firebase.auth().onAuthStateChanged(firebaseUser => { 

    if (firebaseUser) { 

     if (firebaseUser.emailVerified == true) { 

      // alert("User is verified"); 

      // ERROR HERE, NEED TO NOW ENTER SITE. LEGIT USER 
      this.$router.push({ path : '/home'}); 

     } else { 
      document.getElementById('btnLogout').style.display = 'none'; 
     } 

     firebaseUser.sendEmailVerification().then(function() { 
      console.log('Send verification email'); 
     }, function(error) { 
      console.log('Error: Did not send verification email'); 
     }); 

    } else { 
     console.log('Not loggend in'); 
     document.getElementById('btnLogout').style.display = 'none'; 
    } 
})

來源

2017-07-24 Edward Potter

此代碼是什麼？在Vue生命週期處理程序中？如果沒有，你還可以顯示路由器在哪裏/如何定義。 – Bert

'console.log（this）'第一個。它聽起來像它不是一個Vue實例。 – Ikbel

把你的'onAuthStateChanged'方法放在Vue'mounted（）'方法中 –

你可以嘗試Myfirebase它是一個分離的SPA框架，它是火力地堡和易於使用的高度兼容。

在這個用例中，認證模塊已經構建在框架中，它可以通過組件全局觸發。

例子：

我們要確定用戶是否已登錄還是不行。
我們將通過Firebase身份驗證檢索用戶電子郵件。

App.vue：

<template> 
    <div class = "container"> 
     <h1>Welcome {{useremail}}</h1> 
    </div> 
</template> 

<script> 
export default { 
    mounted() { 
     this.$auth.state({ 
     forward: "/app", // the user is signed-in 
     redirect': "/login", // the user is not signed-in, redirecting to login 
     then: (user) => { 
      console.log(user.email) 
      // retrieve useremail 
      this.usereamil = user.email 
     }, 
     catch: (error) => { 
      console.log(error.message) 
     } 
     }) 
    }, 
    data() { 
     return { 
     useremail: "" 
     } 
    } 
} 
</script>

該項目仍處於發展階段。如果您有任何問題，隨時提交任何問題或拉請求。

來源

2017-07-29 15:22:01

嗨，標記爲已解決。將檢查出來。看起來不錯。 –

謝謝，隨時提交任何問題或拉請求 –

Vuejs：如何在使用Firebase進行身份驗證後轉到頁面

回答

相關問題