首页 > 解决方案 > 如果 Firebase 登录成功,如何链接到下一页?

问题描述

我在 Web 应用程序中使用 Firebase Auth 时遇到了一些问题。我以前在移动开发中使用过它,但无法通过 JavaScript web 掌握它。

这是我的代码:

function signIn(){
    var userEmail = document.getElementById("email_").value;
    var userPass = document.getElementById("password_").value;
    firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        window.alert(errorCode);
    });
    var user = firebase.auth().currentUser;
    if (user) {
        console.log(user);
        window.location("home.html");
    } else {}
}
<!DOCTYPE html>
<head>
  <meta charset="utf-8"/>
  <script src="login.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.5.7/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.5.7/firebase-database.js"></script>
  <link rel="stylesheet" href="../style/style.css">
  <script src="https://www.gstatic.com/firebasejs/5.5.7/firebase.js"></script>
  <script>
  var config = {
    apiKey: "AIzaSyDp_LRGOFoqZuvRTWmDLdheLy184QKMOFA",
    authDomain: "norednovember.firebaseapp.com",
    databaseURL: "https://norednovember.firebaseio.com",
    projectId: "norednovember",
    storageBucket: "norednovember.appspot.com",
    messagingSenderId: "569257202876"
  };
  firebase.initializeApp(config);
  </script>
</head>
<body>

  <div id="login_div" class="main-div">
    <p id="email">Email</p>
    <input type="email" placeholder="Email Address" id="email_"/>
    <p id="password">Password</p>
    <input type="password" placeholder="Password" id="password_"/>
    <button id="signup" onclick="signIn()">Log In</button>
  </div>
  
</body>
</html>

现在,发生的情况是,当我输入错误的电子邮件或密码时,会弹出一个窗口警报让我知道。但是当我在警报上单击“确定”时,它会自动将我重定向到下一页(“home.html”)。

如何更改它,使其仅在成功登录后重定向用户?

谢谢!

标签: javascripthtmlfirebaseauthenticationfirebase-authentication

解决方案


我可能对此有误,但是您能否不检查错误是否存在错误,如果不存在则登录?

    firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
     if (error) {

     }
     else{
        //login
     }
   });

我相信正确的方法是执行以下操作。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    //user exists and is logged in
    //redirect Home
  } else {
    // User is signed out.
    // redirect to login
  }
});

如果您在每个页面上都进行了上述检查,但条件中没有任何重定向,那么true您的网站基本上将受到密码“保护”。每当未登录(或经过身份验证)的用户尝试访问页面时,它都会将他们重定向到登录,直到他们登录为止。我使用“受保护”是因为我不知道这是否是密码保护网站的正确方法,但它适用于前端。如果他们通过了身份验证,那么什么都不会发生变化并且他们能够看到该站点 - 您还可以安全地调用任何user变量而不是null.


推荐阅读