gpt4 book ai didi

javascript - Firebase 身份验证的 onAuthStateChanged 中的重定向无限加载页面

转载 作者:行者123 更新时间:2023-12-02 21:57:33 24 4
gpt4 key购买 nike

我按照 Stack Overflow - How to redirect after a user signs in with Firebase authentication? 的说明进行操作

index.html:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My auth page</title>
<script defer src="/__/firebase/7.5.0/firebase-app.js"></script>
<script defer src="/__/firebase/7.5.0/firebase-auth.js"></script>
<script defer src="/__/firebase/7.5.0/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- My html code -->
<script type="text/javascript" defer src="auth.js"></script>
</body>

</html>

auth.js:

function toggleSignIn() {
if (firebase.auth().currentUser) {
firebase.auth().signOut();
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
}

function initApp() {
console.log('start initApp');
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
console.log('logged in');
window.location = 'admin-console.html';
} else {
console.log('not logged in');
window.location = 'index.html'; //causes endless loop
}
});
document.getElementById('loginbutton').addEventListener('click', toggleSignIn, false);
}

window.onload = function () {
console.log('initialize app');
initApp();
};

我可以看到这段代码陷入了无限循环。但我没有看到我从说明中遗漏了什么。看来这个指令应该有效。

最佳答案

当您调用signInWithEmailAndPassword()时方法并且成功,用户已登录。因此,如果我正确理解您的功能需求,您应该不需要使用 onAuthStateChanged()

您可以按照以下方式做一些事情:

function login() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}

firebase.auth().signInWithEmailAndPassword(email, password)
.then(userCredential => {
console.log("User " + userCredential.user.uid + " LOGGED IN");
window.location = 'admin-console.html';
})
.catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
//Throw an error
});
}

function logout() {
firebase.auth().signOut()
.then(() => {
console.log("User SIGNED OUT");
window.location = 'index.html';';
})
}

function initApp() {
console.log('start initApp');
document.getElementById('loginbutton').addEventListener('click', login, false);
document.getElementById('logoutbutton').addEventListener('click', logout, false);
}

window.onload = function () {
console.log('initialize app');
initApp();
};
<小时/>

请注意,您需要添加一个 logoutbutton 按钮。如果您只想拥有一个切换按钮(而不是一个 loginbutton 按钮加一个 logoutbutton 按钮),您可以轻松地修改上述代码。

关于javascript - Firebase 身份验证的 onAuthStateChanged 中的重定向无限加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59965604/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com