Firebase身份验证-当用户注销（JS）时不会调用onAuthStateChanged

时间：2020-03-08 19:16:54

标签： javascript html firebase firebase-authentication

最近，我开始使用Firebase进行大学项目，现在我在使用“身份验证”模块。我用Bootstrap构建了一个登录页面，用户可以在其中登录并创建一个帐户。 （index.html）从该登录页面，应该将用户定向到usermanagement.html，这类似于主页。我的问题是，用户登录时不会调用onAuthStateChanged（）函数。然后，我希望窗口直接指向用户管理，反之亦然。

index.html 

<!DOCTYPE html>
<html>

<head>
  <!-- Meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="main.css">

  <title>FireBase</title>

</head>

<body>
  <div class="jumbotron">
    <div class="container w-50">
      <h1 class="display-4"><i class="mdi mdi-glass-mug-variant mdi-" aria-hidden="true"></i> FireBase</h1>
      <p class="lead">Welcome to the exclusive Club! Please login and enjoy your stay!</p>
    </div>
  </div>

  <div class="container w-50">
    <form id="login-form">
      <div class="form-group">
        <label for="username">E-Mail</label>
        <input id="txtEmail" class="form-control" type="text" name="">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input id="txtPassword" class="form-control" type="password" name="">
      </div>
      <a id="btnLogin" class="btn btn-outline-success mb-3" href="#usermanagement.html" role="button">Login</a>
      <a id="btnSignUp" class="btn btn-outline-success mb-3" href="#usermanagement.html" role="button">Create Account</a>
      <a id="btnLogout" class="btn btn-outline-success mb-3" href="#usermanagement.html" role="button">Logout</a>
    </form>
  </div>

  <!-- Bootstrap JavaScript -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  crossorigin="anonymous"></script>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-auth.js"></script>

   <!-- Own script -->
    <script src="main.js"></script>
  </body>

</html>

usermanagement.html 

<!DOCTYPE html>
<html>

<head>
  <!-- Meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="main.css">

  <title>FireBase</title>

</head>

<body>
  <!-- Navbar (https://www.youtube.com/watch?v=23bpce-5s8I) -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="#" class="navbar-brand">
      <i class="mdi mdi-glass-mug-variant mdi-" aria-hidden="true"></i>
      FireBase
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a href="#" class="nav-link">Benutzer</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Planung</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <a id="btnLogout" class="btn btn-outline-danger mb-2" role="button">Logout</a>
      </form>
    </div>
  </nav>

  <!-- Container -->
  <div class="container">
    <div class="row">
      <div class="col">

      </div>
      <div class="col">

      </div>
    </div>
    <div class="row">

    </div>
  </div>

  <!-- Bootstrap JavaScript -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  crossorigin="anonymous"></script>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-auth.js"></script>


    <script src="main.js"></script>
  </body>

</html>

main.js 

(() => { 
// Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyDq34a0xF5q_aIuCuFsPSJmDqyRZYtC2_E",
    authDomain: "webengineeringproject-c5fc7.firebaseapp.com",
    databaseURL: "https://webengineeringproject-c5fc7.firebaseio.com",
    projectId: "webengineeringproject-c5fc7",
    storageBucket: "webengineeringproject-c5fc7.appspot.com",
    messagingSenderId: "290017335954",
    appId: "1:290017335954:web:951bd3f4baeaf89075244b",
    measurementId: "G-PCTZ4HQV52"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

  // Set variable for Database
  var db = firebase.firestore();

  //get all UI Elements
  const txtEmail = document.getElementById("txtEmail");
  const txtPassword = document.getElementById("txtPassword");
  const btnSignUp = document.getElementById("btnSignUp");
  const btnLogin = document.getElementById("btnLogin");
  const btnLogout = document.getElementById("btnLogout");

//Process entered login-data
  btnLogin.addEventListener("click", () => {
    let email = txtEmail.value;
    let password = txtPassword.value;

    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, password);

    promise
      .catch((error) => {
        console.log(error.message);
        //TODO: Error Message, login Failed
    });
  });

  btnSignUp.addEventListener("click", () => {
    let email = txtEmail.value;
    let password = txtPassword.value;

    firebase.auth().createUserWithEmailAndPassword(email, password).catch((error) => {
      // TODO: Error Message if new Account couldn't be created
    });
  });

  btnLogout.addEventListener("click", () => {
    console.log("Logout!")
    firebase.auth().signOut();
    console.log(firebase.auth().currentUser)
  });

  //Code runs when User state changes
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      if(window.location.pathname == "/index.html") {
        window.location.href = "usermanagement.html";
      }
    } else if(window.location.pathname == "/usermanagement") {
      window.location.href = "index.html";
    }
  })
});

0 个答案:

没有答案
相关问题
最新问题