Firebase，避免已登录的用户访问登录页面 [英] Firebase, Avoid Logged-in user to visit login page

问题描述

我正在使用Firebase托管制作应用程序.我的login.html页面中包含以下代码.

I am using firebase hosting to make an app. I have following code in my login.html page.

    <script>

        $(document).ready(function() {
                firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                    // user is loggin redirect to dashboard
                } else {
                    // No user is signed in. keep them here
                }
                });
        });

 $("#loginbtn").on("click",()=>{
                console.log("login");
                var errormessage="";
                var email = $("#email").val();
                var password =  $("#password").val();

                //client validate
                if(email.length == 0)
                errormessage+=("Enter a valid email.<br>");
                if(password.length == 0)
                errormessage+="Enter a valid password.<br>";
                if(errormessage.length==0){
                    $("#loginbtn").prop('disabled', true);
                    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
                    // Handle Errors here.
                    var errorCode = error.code;
                    var errorMessage = error.message;
                    $("#loginbtn").prop('disabled', false);
                    showMessage(errorMessage);
                    // ...
                    });


                }else{
                    $("#signupbtn").prop('disabled', false);
                    showMessage(errormessage);
                }


            })
    </script>

但是，当用户登录并且用户明确尝试通过将其放在地址栏中尝试访问login.html时，会显示登录页面几秒钟，然后将其重定向到仪表板页面.由于登录表单显示了几秒钟，因此留下了糟糕的用户体验.我如何实现类似php session的功能?页面在不呈现的情况下重定向到哪里?我们可以使用重写"连接云功能以将用户从后端重定向到其他页面吗?云功能可以找到用户是否在客户端登录?

However when user is logged in and user explicitly try to visit login.html by puting that in address bar the login page is being displayed for few seconds and then it redirects to dashboard page. This leaves a bad user experience as login form is displayed for few seconds. How can i acheive something like php sessions? where page redirects without rendering? Can we connect cloud functions using "rewrites" to redirect user to other pages from backend? can a cloud function find if user is logged-in or not on client side?

(1)用户使用 signInWithEmailAndPassword()登录.
(2) AuthState 侦听器重定向到主URL.
(3)用户尝试再次访问login.html页面.
(4)login.html页面将显示几秒钟.<问题.
(5) AuthState 侦听器重定向到主URL.

(1) user Login with signInWithEmailAndPassword().
(2) AuthState listener redirects to home url.
(3) user try to visit login.html page again.
(4) login.html page gets displayed for few seconds. < problem.
(5) AuthState listener redirects to home url.

推荐答案

如果我很了解您的问题，则应等待解决 signInWithEmailAndPassword(email，password)返回的诺言以重定向您的问题用户.

If I understand well your problem, you should wait that the promise returned by signInWithEmailAndPassword(email, password) is resolved to redirect your user.

事实上，如

As a matter of fact, signInWithEmailAndPassword(email, password) "asynchronously signs in" as explained in the doc, and returns a promise. This is why "it takes time" as you mention.

因此，您应该执行以下操作来处理登录:

So you should do as follows to handle the login:

firebase.auth().signInWithEmailAndPassword(email, password)
   .then(userCredential => {
       //redirect your user here, because at this point the user is logged in.
   })
   .catch(error => {
            // Handle Errors here.
            // ...
    });

如果要在异步执行功能期间显示微调器或进度条，则可以在单击 loginbtn 按钮并将其隐藏在 then().

If you want to show a spinner or a progress bar during the asynchronous execution of the function, you can show it when you click on the loginbtn button and hide it in the then().

请注意，在这种情况下，您无需使用 onAuthStateChanged()来检测用户何时登录.

Note that you don"t need to use onAuthStateChanged(), in this case, to detect when the user is logged in.

这篇关于Firebase，避免已登录的用户访问登录页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！