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应用已存在

回答

相关问题