嘗試使用Firebase支持的Web登錄頁面登錄，然后重定向到主頁

Question

我在嘗試使用Firebase登錄和重定向我的網站登錄頁面時遇到問題。 我想使用Firebase實時數據庫上保存的電子郵件地址和密碼登錄。 我使用“轉到控制台”>“身份驗證”>“用戶”>“添加用戶”，保存后進入登錄頁面，然后輸入電子郵件地址和密碼。 然后，我想重定向到我的dashboard.html頁面，但是經過數小時的代碼調試后，我似乎無法找出問題所在。 我還嘗試過在Firebase上調整我的登錄方法。 我有一個截圖。 登錄方法

 (function(){ // Initialize Firebase src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js" var config = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" }; firebase.initializeApp(config); //Get Elements const txtEmail = document.getElementById('txtEmail'); const txtPassword = document.getElementById('txtPassword'); const btnLogin = document.getElementById('btnLogin'); const btnSignUp = document.getElementById('btnSignUp'); const btnLogout = document.getElementById('btnLogout'); //Add Login event btnLogin.addEventListener('click', e =>{ //Get email and pass const email = txtEmail.value; const pass = txtPassword.value; const auth = firebase.auth(); //Sign in const promise = auth.signInWithEmailAndPassword(email, pass); promise.catch(e => console.log(e.message)); }); //add signup event btnSignUp.addEventListener('click', e =>{ // TODO: CHECK 4 REAL EMAILZ const email = txtEmail.value; const pass = txtPassword.value; const auth = firebase.auth(); //Sign in const promise = auth.createUserWithEmailAndPassword(email, pass); promise.catch(e => console.log(e.message)); }); btnLogout.addEventListener('click', e =>{ firebase.auth().signOut(); }); //add a realtime listener firebase.auth().onAuthStateChanged(firebaseUser =>{ if(firebaseUser) { console.log(firebaseUser); btnLogout.classList.remove('hide'); window.location.href == 'dashboard.html' } else { console.log(firebaseUser); btnLogout.classList.add('hide'); window.location.href == 'login.html' } }); }());

 body { margin: 0; padding: 0; background: url(bg.jpg); background-size: cover; background-position: center; font-family: sans-serif; } .loginbox{ width: 320px; height: 420px; background: #003300; color: #ffffff; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); box-sizing: border-box; padding: 70px 30px; } .techies{ width: 100px; height: 100px; border-radius: 50%; position: absolute; top: -50px; left: calc(50% - 50px); } h1{ margin: 0; padding: 0 0 20px text-align: center; font-size: 22px; } .loginbox p{ margin: 0; padding: 0; font-weight: bold; } .loginbox input{ width: 100%; margin-bottom: 20px; } .loginbox input[type="usernametxt"], input[type="passwordtxt"] { border: none; border-bottom: 1px solid #000000; background: transparent; outline: none; height: 40px; color:#000000; font-size: 16px; color: #000000; font-size: 16px; } .loginbox input[type="submitbtn"] { border: none; outline: none; height: 40px; background: #fb2525; color: #fff; font-size: 18px; border-radius: 20px; } .loginbox input[type="submitbtn"]:hover { cursor: pointer; background: #ffc107; color: #000; } .loginbox a{ text-decoration: none; font-size: 12px; line-height: 20px; color: darkgrey; } .loginbox a:hover { color: #ffc107; }

 <html> <head> <meta charset="utf-8"> <title>Login Page</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class = "loginbox"> <img src="techies.jpg" class="techies"> <h1>Login Here</h1> <form> <input id="txtEmail" type="email" placeholder="Email"> <input id="txtPassword" type="password" placeholder="Password"> <button id="btnLogin" class="btn-btn-action">Log In</button> <button id="btnSignUp" class="btn-btn-secondary">Sign Up</button> <button id="btnLogout" class="btn-btn-action hide">Logout</button> </form> </div> <script src="loginjs.js"></script> </body> </head> </hmtl>

Answer 1

您的問題始於

window.location.href == 'dashboard.html'

您正在進行均等比較。 基本上詢問href當前是否為'dashboard.html'應該只是一個=

然后，您還有另一個問題... window.location.href必須是完全限定的地址，因此您將必須添加協議，以此類推，因此它看起來像是' http：//.../dashboard.html “

window.location.href = 'https://stackoverflow.com/questions/55145322/trying-to-login-using-web-login-page-that-is-supported-by-firebase-then-redirec/55145515#55145515'

編輯

實際上，您可以相對使用location.assign：

location.assign('./dashboard.html');

請參閱mdn文檔以獲取location.assign

啊，顯然你也可以

location.href= './dashboard.html'

嗯...學到了一些新東西

另一個編輯這是您的onAuthStateChanged處理程序應按預期工作的方式

 //add a realtime listener firebase.auth().onAuthStateChanged(firebaseUser =>{ if(firebaseUser) { console.log(firebaseUser); btnLogout.classList.remove('hide'); // window.location.href == 'dashboard.html' // Old Line window.location.href = './dashboard.html'; // Removed = and added ./ } else { console.log(firebaseUser); btnLogout.classList.add('hide'); // window.location.href == 'login.html' // Old Line window.location.href = './login.html'; // Removed = and added ./ } });

嘗試使用Firebase支持的Web登錄頁面登錄，然后重定向到主頁

問題描述

1 個解決方案

解決方案1
2 已采納 2019-03-13 15:26:02

嘗試使用Firebase支持的Web登錄頁面登錄，然后重定向到主頁

問題描述

1 個解決方案

解決方案1 2 已采納 2019-03-13 15:26:02

解決方案1
2 已采納 2019-03-13 15:26:02