我創建了一個帶有登錄按鈕的登錄頁面。現在我想讓它每當單擊登錄按鈕時，它都會呼叫firebase的身份驗證系統并檢查用戶是否存在，如果是，則導航到主頁。我怎樣才能做到這一點？
我已經設定了firestore，我只想讓它只有在用戶存在時才導航到另一個頁面，否則會引發錯誤。
firebase的登錄功能是這樣的
const logInWithEmailAndPassword = async (email, password) => {
try {
await signInWithEmailAndPassword(auth, email, password);
} catch (err) {
console.error(err);
alert("Email or Password not Registered!");
}
};
這是登錄按鈕
<button
onClick={async () => {
await logInWithEmailAndPassword(email, password);
navigate('/Login/HomePage)};
}}
>
Login
</button>
現在無論電子郵件和密碼是什么，它仍然導航到主頁。如何進行此設定，以便僅當且僅當用戶存在于 firestore 時才導航？
uj5u.com熱心網友回復：
問題
該logInWithEmailAndPassword函式捕獲并吞下任何 Promise 拒絕和拋出的錯誤，因此有效地回傳到button元素onClick回呼的運行時范圍，然后發出命令式導航操作。
解決方案
signInWithEmailAndPassword從in回傳 Promise 物件并在元素的處理程式logInWithEmailAndPassword中處理快樂/悲傷的路徑。buttononClick
例子：
const logInWithEmailAndPassword = async (email, password) => {
return signInWithEmailAndPassword(auth, email, password);
};
...
<button
onClick={async () => {
try {
await logInWithEmailAndPassword(email, password);
navigate("/Login/HomePage");
} catch(error) {
console.error(error);
alert("Email or Password not Registered!");
}
}}
>
Login
</button>
替代解決方案
或者，您可以將navigate函式傳遞給logInWithEmailAndPassword并在經過身份驗證時導航。
例子：
const logInWithEmailAndPassword = async (email, password, navigate, target = "/") => {
try {
await signInWithEmailAndPassword(auth, email, password);
navigate(target);
} catch (err) {
console.error(err);
alert("Email or Password not Registered!");
}
};
...
<button
onClick={() => {
logInWithEmailAndPassword(email, password, navigate, "/Login/HomePage");
}}
>
Login
</button>
uj5u.com熱心網友回復：
做這樣的事情
const logInWithEmailAndPassword = async (email, password) => {
try {
await signInWithEmailAndPassword(auth, email, password);
navigate('/Login/HomePage');
} catch (err) {
console.error(err);
alert("Email or Password not Registered!");
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522651.html
標籤：Google Cloud Collective javascript反应firebase 身份验证反应路由器反应路由器do