我正在使用純 HTML 和 javascript 構建一個小型站點，并且我正在使用 Firebase 進行身份驗證。當用戶轉到某個頁面時，如果他們已登錄，我想將他們重定向到另一個頁面。這是我用來實作此目的的代碼（所有腳本都放在 中<head>）：
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script>
const firebaseConfig = {
// ...
};
firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged((user) => {
if (user) {
window.location.href = "/feed";
}
});
</script>
這會正確重定向用戶，但在 Firebase 獲取身份驗證狀態并onAuthStateChanged觸發回呼期間，用戶會短暫地看到面向未經過身份驗證的用戶的頁面。有沒有辦法在呼叫 onAuthStateChanged 之前阻止呈現 HTML 頁面？
uj5u.com熱心網友回復：
Firebase 會在頁面加載時自動恢復用戶。然而，這需要呼叫服務器，以檢查帳戶是否被禁用，因此可能需要一些時間。
常見的解決方法是將您自己的值存盤在本地存盤中，以指示您是否認為用戶可能已登錄，并（如果是）立即重定向到經過身份驗證的頁面。
如果/當用戶登錄時，您將在該頁面中有一個身份驗證狀態偵聽器以將它們重定向回來，因此大多數用戶在這種情況下會看到快樂的路徑。
Firebaser Michael Bleigh 在 Google I/O 的一次演講中談到了這一點。
uj5u.com熱心網友回復：
你試過異步/等待嗎？
一旦一個 Html 檔案從上到下渲染并且你沒有使用 async/await 方法，一旦它是一個異步函式，html 將繼續渲染。
我建議您嘗試這樣來強制渲染等待身份驗證回應：
<script>
const firebaseConfig = {
// ...
};
firebase.initializeApp(firebaseConfig);
async function firebaseAuth(){
try{
const authResponse = await firebase.auth().onAuthStateChanged((user) => {
window.location.href = "/feed";
});
}catch(e){
console.log(e);
}
};
firebaseAuth();
</script>
您可以在檔案上閱讀更多資訊： https ://www.w3schools.com/js/js_async.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/429134.html
標籤：javascript html firebase 身份验证
上一篇：將單個專案對齊到導航欄的右側