web-dev-qa-db-fra.com

Initialiser les références Firebase dans deux fichiers distincts dans la nouvelle API

J'ai effectué une mise à niveau vers la nouvelle API et je ne sais pas comment initialiser les références Firebase dans deux fichiers distincts:

    /* CASE 1 */
    // 1st file
    var config = {/* ...  */};
    firebase.initializeApp(config);
    var rootRef = firebase.database().ref();

    // 2nd file - initialize again
    var config = {/* ...  */};
    firebase.initializeApp(config);
    var rootRef = firebase.database().ref();

RÉSULTAT: bundle.js: 535 Erreur non capturée: l'application Firebase nommée '[DEFAULT]' existe déjà.

    /* CASE 2 */
    // 1st file
    var config = {/* ...  */};
    firebase.initializeApp(config);
    var rootRef = firebase.database().ref();

    // 2nd file - don't initialize
    var rootRef = firebase.database().ref();

RÉSULTAT: bundle.js: 529 Erreur non capturée: aucune application Firebase '[DEFAULT]' n'a été créée - appelez Firebase App.initializeApp ().

Avant la nouvelle API que je viens d'appeler

var myFirebaseRef = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");

dans chaque fichier, et cela a bien fonctionné.

javascriptfirebase
30
Long Sang Chan

C'est un problème que j'ai rencontré lors de la mise à niveau vers la nouvelle version de Firebase. Vous souhaiterez peut-être initialiser deux applications Firebase distinctes, comme expliqué dans d'autres réponses, mais je souhaitais simplement utiliser les références dans deux emplacements différents de mon application et j'entendais la même erreur.

Ce que vous devez faire dans cette situation est de créer un module Firebase pour votre application qui initialise Firebase une seule fois, puis de l’importer ou de le demander ailleurs dans votre application.

C'est assez simple, voici le mien: modules/firebase.js

import firebase from 'firebase';
var firebaseConfig = {
  apiKey: "some-api-key",
  authDomain: "some-app.firebaseapp.com",
  databaseURL: "https://some-app.firebaseio.com",
  storageBucket: "some-app.appspot.com",
};

var FbApp = firebase.initializeApp(firebaseConfig);
module.exports.FBApp = FbApp.database(); //this doesnt have to be database only

Et puis ailleurs dans votre application, vous simplement:

import FBApp from '/your/module/location'
var messagesRef = FBApp.ref("messages/");
44
lommaj

Vous devez nommer vos différentes instances (les applications comme les appelle Firebase); par défaut, vous travaillez avec le [DEFAULT] App, car c’est le cas d’utilisation le plus courant, mais lorsque vous devez utiliser plusieurs applications, vous devez ajouter un nom lors de l’initialisation:

// Intialize the "[DEFAULT]" App
var mainApp = firebase.intializeApp({ ... });

// Intialize a "Secondary" App
var secondaryApp = firebase.initializeApp({ ... }, "Secondary");
...
mainApp.database().ref("path/to/data").set(value);
secondaryApp.database().ref("path/to/data").set(anotherValue);

Vous trouverez d'autres exemples de scénarios dans la section mise à jour Initialiser plusieurs applications du guide Ajouter une base de feu à votre projet JavaScript.

27
Jaime Gómez

Si vous n'avez pas le contrôle sur l'endroit où Firebase sera instancié, vous pouvez faire quelque chose comme ceci:

 try {
    let firApp = firebase.app(applicationName);
    return firApp;
  } catch (error) {
    return firebase.initializeApp({
      credential: firebase.credential.cert(firebaseCredentials),
      databaseURL: firebaseUrl
    }, applicationName);
  }

Firebase essaiera d’obtenir l’application, si elle n’existe pas, vous pourrez l’initialiser librement.

4
andresk

J'ai fait l'erreur en important comme ça.

import firebase from 'firebase'

const firebaseConfig = {
  apiKey: 'key',
  authDomain: 'domain',
  databaseURL: 'url',
  storageBucket: ''
};

firebase.initializeApp(firebaseConfig);

Cela a bien fonctionné pendant quelques jours, mais lorsque j'ai essayé de me connecter avec jetons personnalisés , mon objet auth n'a pas été modifié. J'ai dû actualiser la page pour la mettre à jour afin de pouvoir effectuer certains appels à la base de données protégés par mes propres règles d'authentification.

 ".read": "$uid === auth.uid || auth.isAdmin === true || auth.isTeacher === true",

Quand j'ai changé mes importations à cela, cela a encore fonctionné.

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

const firebaseConfig = {
  apiKey: 'key',
  authDomain: 'domain',
  databaseURL: 'url',
  storageBucket: ''
};

firebase.initializeApp(firebaseConfig);

Ensuite, chaque fois que j'ai besoin d'utiliser Firebase dans un certain module, j'importe ceci (notez l'importation depuis firebase/app au lieu de firebase):

import firebase from 'firebase/app';

Et parlez à certains services comme suit:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // Authenticated.
  } else {
    // Logged out.
  }
});

firebase.database().ref('myref').once('value').then((snapshot) => {
  // do stuff with the snapshot
});
2
Jeroen Wienk

Pour créer plusieurs occurrences à l'aide de new firebase.initializeApp(), vous avez besoin d'un deuxième paramètre pour le constructeur de base de feu:

firebase.initializeApp( {}, "second parameter" );

Comparez-le à l'ancienne façon de générer plusieurs instances où

new Firebase.Context()

est le deuxième paramètre:

new Firebase('', new Firebase.Context() );
1
hayden