【问题标题】:Firebase Authentication works but keeps on refreshing the pageFirebase 身份验证有效,但不断刷新页面
【发布时间】:2017-12-13 19:44:18
【问题描述】:

所以我也是 Web 开发和 Firebase 的新手。我一直在尝试用简单的 javascript 和 firebase 构建一个多页网络应用程序。应用程序看起来不错,并且适用于大部分部分。然而它真的没有用,因为我遇到了以下问题:

  1. 当我通过 googleAuthProvider 登录(在我的 index.html 页面上)时,我被带到另一个页面 main.html 。现在直到这里很好。但是一旦 main.html 被加载,它就会进入一个不断刷新的循环。

我这样做的理由是,Firebase 试图在加载时重新验证页面。所以循环发生了。但是为什么,这个我无法调试。

我已经查看了我在互联网上可以找到的几乎所有内容,但没有找到适用于带有 firebase 的基于 javascript 的简单多页 Web 应用程序的解决方案。

如果有人有兴趣并愿意看看,这里是我的应用程序的链接。

Chatbot

另外,这也是我的 javascript 代码。

var config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXX",
    storageBucket: "XXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXX"
  };
  firebase.initializeApp(config);

//===============================================================================================
$("document").ready(function(){

const signinGoogle = document.getElementById("googleAuth");
const signOut = document.getElementById("signout");
const sendMsg = document.getElementById("send");
const messageBox = document.getElementById("chatBox");
const displayNAME = document.getElementById("dipslayName");
const storageRef = firebase.storage().ref();
	
var currentUser;
var name;
var photoUrl;

 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++	
	initApp();
 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 	if(signinGoogle){
		 googleAuth.addEventListener('click', e=>{
			firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(function(result) {	 
			// This gives you a Google Access Token. You can use it to access the Google API.
  			var tokenGoogle = result.credential.accessToken;
			  // The signed-in user info.
			  var userGoogle = result.user;
			  // ...Below line to be rmeooved if not working expectedly.
				// var user = firebase.auth().currentUser;
			}).catch(function(error) {
 			 // Handle Errors here.
 			 var errorCode = error.code;
			  var errorMessage = error.message;
			  // The email of the user's account used.
			  var email = error.email;
 			 // The firebase.auth.AuthCredential type that was used.
  			var credential = error.credential;
  			// ...
			});
		 });
		
		}
 //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 		if(signOut){
          signout.addEventListener('click', e=>{
		   
		  if(confirm("Do you wish to leave?")){
			 promise = firebase.auth().signOut().then(function(){
			 window.location = "index.html";
			 });
			 promise.catch(e => 
	         console.log(e.message))
			 }	
			
			});
		 }
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    function initApp(){
    firebase.auth().onAuthStateChanged(function(user){
	   
	  if(user){
	  window.location = "main.html";
	 
	  $("document").ready(function(){
				
			currentUser  = firebase.auth().currentUser;
		        name  = currentUser.displayName;
			photoUrl = currentUser.photoURL ;
		  
			console.log("Current user's name is : "+name);
			console.log("Current user's photoUrl is : "+photoUrl);
	        
			displayNAME.innerHTML = "Hi "+name;
			
    //+++++++++++Retrieving Msgs++++++++++++++++++++++++++++++++
				var i=1;	
				var firebaseRetrieveRef = firebase.database().ref().child(name+uid+"/MessageBoard");
				firebaseRetrieveRef.on("child_added", snap =>{
				var retrievedMsg = snap.val();
				console.log("retrieved msgs is : "+retrievedMsg);
				$("#taskList").append("<li id='list"+i+"'><div style='width:100%'><img src='"+photoUrl+"'style='width:10px;height:10px;border-radius:5px;'/><label>"+name+"</label></div><div style='width:100%'><p>"+retrievedMsg+"</p></div></li>");
				i++;
					});
	//+++++++++++Storing Msgs++++++++++++++++++++++++++++++++
		$("#send").on("click", function(){
			 var newMessage=messageBox.value;
			  if(newMessage==""){
			  alert("Empty Message doesn't make any sense, does it?? ");
			  }
			  else{
			  var firebaseStoreRef = firebase.database().ref().child(name+uid+"/MessageBoard");
			 firebaseStoreRef.push().set(newMessage);
              messageBox.value="";
			  }
			});
	//+++++++++++Clearing/deleting all tasks++++++++++++++++++++++++
		$("#clear").on("click", function(){
			  var firebaseDeleteRef  = firebase.database().ref().child(name+uid+"/MessageBoard");
			  firebaseDeleteRef.remove();
			  $( ".scrolls" ).empty();
			  });
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++
	
	  });
                }
		else
		{
		console.log(user+" is not logged in");
		}
		
		});
    }	
			  
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 });

【问题讨论】:

    标签: javascript firebase web-applications firebase-authentication firebase-storage


    【解决方案1】:

    你一直重定向到 main.html。

    firebase.auth().onAuthStateChanged(function(user){     
      if(user){
      window.location = "main.html";
    

    只要确定用户已登录,您就会一直重定向到 main.html。确保在 main.html 上,您没有使用相同的逻辑并再次重定向。

    【讨论】:

    • 我的 main.html 上没有任何 JavaScript 代码,除了我的 logic.js 文件的源和 firebase 源。 。所以,我仍然不清楚为什么会发生循环。
    • 我通过将应用程序设置为单页应用程序来解决此问题。但我又一次面临同样的问题。我当前的应用程序中有多个 html 页面。使用 google auth,我可以从索引页面移动到主页,但主页仍然会不断重新加载。
    猜你喜欢
    • 2021-12-20
    • 2023-01-01
    • 1970-01-01
    • 2018-08-20
    • 2011-11-18
    • 2021-05-26
    • 2020-04-14
    • 2016-09-19
    • 1970-01-01
    相关资源
    最近更新 更多