在Firebase中，在验证登录后，如何重定向并防止未登录的用户访问子页面？_Firebase_Firebase Authentication

在Firebase中，在验证登录后，如何重定向并防止未登录的用户访问子页面？

firebase

在Firebase中，在验证登录后，如何重定向并防止未登录的用户访问子页面？,firebase,firebase-authentication,Firebase,Firebase Authentication,我正在尝试在Firebase上设置一个简单的身份验证机制。我有一个可以进行身份验证的用户帐户成功登录后，如何让用户重定向到仪表板页面？现在我只是在做window.location=dashboard.html，但这并没有重定向。另外，另一个问题是我可能不需要重定向，而是更改应用程序状态。我该怎么做？我有两个HTML文件，index.HTML和登录表单以及dashboard.HTML，那么如何在不重定向的情况下获得显示的仪表板信息呢如何通过在URL末尾添加Dashboard.html来防止非用

我正在尝试在Firebase上设置一个简单的身份验证机制。我有一个可以进行身份验证的用户帐户

成功登录后，如何让用户重定向到仪表板页面？现在我只是在做

window.location=dashboard.html

，但这并没有重定向。另外，另一个问题是我可能不需要重定向，而是更改应用程序状态。我该怎么做？我有两个HTML文件，

index.HTML

和登录表单以及

dashboard.HTML

，那么如何在不重定向的情况下获得显示的仪表板信息呢

如何通过在URL末尾添加

Dashboard.html

来防止非用户直接访问仪表板

index.html

<body>
    <h1>Sign-In</h1>

    <div class="container">
        <input id="txt_email" type="email" placeholder="Email">
        <input id="txt_password" type="password" placeholder="Password">

        <button id="btnLogin">Log In</button>
    </div>

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

<body>
    <h1>Dashboard</h1>

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

编辑：我的HTML中是否需要

表单

标记？几乎所有的教程都没有，但它们只是展示了身份验证是如何工作的。如果我确实需要它，那么

action

属性应该是什么

Edit2：我将电子邮件/密码输入和按钮包装在一个HTML

表单中

标记中，但只有在我有

action=“#”

的情况下，它才能成功登录。如果我执行了

action=“/”

或

action=“

，则它根本不会登录。我很困惑。

好吧，这里至少有四件事：客户端和服务器之间的区别、HTML表单的工作方式、事件和同步性，以及如何保护Firebase应用程序

客户端和服务器 HTML页面和其中的脚本在浏览器的客户端上运行，并且是公共的。一旦页面和脚本被提供给客户端，就不能阻止用户访问它们。Firebase在服务器端运行，可以在服务器端保护身份验证后的数据。您可以通过在Firebase中设置身份验证和数据访问规则来启用该保护。这不会影响用户对客户端页面或脚本的访问

HTML表单按钮和输入可以包含在带有或不带有表单元素的HTML中。表单元素仅用于直接从页面向服务器提交输入、进行服务器端处理。您正在使用客户端脚本从页面收集输入并提交它们。因此，出于您的目的，您不需要表单元素

action属性是指表单应该提交的地址。“/”指服务器上的根路径，空字符串指回当前路径。“#”将引用当前页面中的命名锚（但没有名称）

事件和承诺除了命名锚之外，还有任何操作的表单都会阻止脚本工作。这是因为在不取消事件的情况下提交表单会使浏览器远离当前页面，从而破坏客户端执行上下文。在您的例子中，即使您在从事件处理程序返回之前调用了auth，但如果不取消事件，脚本也无法工作——因为承诺是异步的，因此会创建承诺，但在承诺完成之前会销毁执行上下文

保护Firebase应用程序的安全从为应用程序提供公共客户端和安全服务器端的角度考虑，这可能很有用。您可以通过静态HTML和JavaScript提供用户界面的外壳，而不介意公开。您可以选择将登录界面和仪表板包含在同一页面上，也可以包含在单独的页面上，设计选项由您决定。您想要保护的可能是用户界面外壳中的实际动态数据和内容。同样，您可以在Firebase中设置规则以保护该数据。然后，您可以在页面中使用客户端脚本（或框架）在仪表板和Firebase之间来回发送数据

您可以使用客户端脚本（或框架）来显示和隐藏某些页面的某些部分，以防它们与您拥有的数据相关（但不能阻止访问此类内容，因为它已经是客户端的）。您可能希望这样做，例如，在用户未登录时显示登录界面，或者在用户登录时隐藏登录界面并显示仪表板，仪表板将填充来自Firebase的相关数据

(function() {

    // Initialize Firebase
    var config = {
      //config info here
    };
    firebase.initializeApp(config);

    // Get elements
    var txt_email = document.getElementById("txt_email");
    var txt_password = document.getElementById("txt_password");
    var btnLogin = document.getElementById("btnLogin");

    // Add click listener to Log in button
    btnLogin.addEventListener("click", e => {
        //Get username and password
        var email = txt_email.value;
        var password = txt_password.value;
        const auth = firebase.auth();

        //Sign in
        const promise = auth.signInWithEmailAndPassword(email, password);
        promise.catch(e => console.log(e.message));
    });


    //Add a realtime authentication listener
    //fires every time an authentication state changes
    firebase.auth().onAuthStateChanged(firebaseUser => {
        if(firebaseUser)
        {
            console.log(firebaseUser);
            window.location = "dashboard.html";
        }
        else
        {
            console.log("not logged in");
        }
    });

}());