ReactJS應用身份驗證：Firebase + FirebaseUI未捕獲錯誤：名爲「[DEFAULT] -firebaseui-temp」的Firebase應用已存在

我遇到了我的代碼問題。我正在用3個選項卡在ReactJS中構建一個單頁Web應用程序。ReactJS應用身份驗證：Firebase + FirebaseUI未捕獲錯誤：名爲「[DEFAULT] -firebaseui-temp」的Firebase應用已存在

當用戶轉到一個選項卡時，將顯示FirebaseUI的身份驗證表單。問題是它只在第一次和第二次工作，如果我切換到另一個選項卡並返回，它會崩潰，React會重新渲染呈現帶有驗證窗體的div的組件並引發錯誤：

"firebase.js:26 Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists."

我的index.html是：

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="./src/favicon.ico"> 
    <script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script> 
    <script> 
     // Initialize Firebase 
     var config = { 
     apiKey: "AIzaSyAdyeoTYNF0xLK37Zv3nEGHWCKNPQjSPsI", 
     authDomain: "xxxx.com", 
     databaseURL: "xxxxx.com", 
     storageBucket: "xxxxxx.appspot.com", 
     messagingSenderId: "xxxxxx" 
     }; 
     firebase.initializeApp(config); 
    </script> 

    <script src="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js"></script> 
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" /> 
     <title>Flockin</title> 
    </head> 
    <body> 

    <div id="root" class="container"></div> 
    <!-- 
     This HTML file is a template. 
     If you open it directly in the browser, you will see an empty page. 

     You can add webfonts, meta tags, or analytics to this file. 
     The build step will place the bundled scripts into the <body> tag. 

     To begin the development, run `npm start` in this folder. 
     To create a production bundle, use `npm run build`. 
    --> 

    </body> 
</html>

具有火力地堡代碼和填充DIV是一個modules目錄另一個文件模塊：

var firebase=global.firebase; 
var firebaseui=global.firebaseui; 

var FirebaseUIManager=function(){ 

// FirebaseUI config. 
var uiConfig = { 
    'signInSuccessUrl': '/archive', 
    'signInOptions': [ 
    // Leave the lines as is for the providers you want to offer your users. 
    firebase.auth.FacebookAuthProvider.PROVIDER_ID, 
    firebase.auth.EmailAuthProvider.PROVIDER_ID 
    ], 
    // Terms of service url. 
    'tosUrl': '<your-tos-url>', 
}; 

// Initialize the FirebaseUI Widget using Firebase. 
var ui = new firebaseui.auth.AuthUI(firebase.auth()); 
// The start method will wait until the DOM is loaded. 
ui.start('#firebaseui-auth-container', uiConfig); 

var initApp = function() { 
firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
    // User is signed in. 
    var displayName = user.displayName; 
    var email = user.email; 
    var emailVerified = user.emailVerified; 
    var photoURL = user.photoURL; 
    var uid = user.uid; 
    var providerData = user.providerData; 
    user.getToken().then(function(accessToken) { 
     document.getElementById('sign-in-status').textContent = 'Signed in'; 
     document.getElementById('sign-in').textContent = 'Sign out'; 
     document.getElementById('account-details').textContent = JSON.stringify({ 
     displayName: displayName, 
     email: email, 
     emailVerified: emailVerified, 
     photoURL: photoURL, 
     uid: uid, 
     accessToken: accessToken, 
     providerData: providerData 
     }, null, ' '); 
    }); 
    } else { 
    // User is signed out. 
    document.getElementById('sign-in-status').textContent = 'Signed out'; 
    document.getElementById('sign-in').textContent = 'Sign in'; 
    document.getElementById('account-details').textContent = 'null'; 
    } 
}, function(error) { 
    console.log(error); 
}); 
}; 

initApp(); 

}; 

export default FirebaseUIManager;

最後，該組件重新呈現形式每次我回去選項卡上的componentDidMount方法時間：

import React, { Component } from 'react'; 
import FirebaseUIManager from './../modules/firebase-auth-login-manager.js'; 

class FlockinList extends Component { 
    componentDidMount(){ 
    FirebaseUIManager(); 
    } 

    render() { 

    return (
     <div> 
     <div id="firebaseui-auth-container"></div> 
     <div id="sign-in-status"></div> 
     <div id="sign-in"></div> 
     <div id="account-details"></div> 
     </div> 
    ); 
    } 
} 

export default FlockinList;

如何解決這個任何想法？謝謝！

來源

2016-09-28 Juan

你應該每次不初始化新FirebaseUI實例告訴你吧：

VAR UI =新firebaseui.auth.AuthUI（firebase.auth（））;

這應該從外部初始化。如果你想渲染，請致電

ui.start（'＃firebaseui-auth-container'，uiConfig）;

想要刪除時，請調用： ui.reset（）;

但是不要每次都初始化一個新的實例。

來源

2016-09-28 17:41:14 bojeil

那是解決方案...... 我刪除了 //使用Firebase初始化FirebaseUI Widget。 var ui = new firebaseui.auth.AuthUI（firebase.auth（））; 來自於該模塊，並將其放在index.html文件的頭文件中，然後使用另一個變量var ui = global.ui，現在它可以創造奇蹟.......是最好的方法接近它？ http://pastebin.com/ijcGbXWS – Juan

ReactJS應用身份驗證：Firebase + FirebaseUI未捕獲錯誤：名爲「[DEFAULT] -firebaseui-temp」的Firebase應用已存在

回答

相關問題