reactjs - ReactJS 管理面板 + Firebase Auth API 密钥不正确

Question

试图解决一个问题。刚刚从 Codecanyon 购买了 Mataam 应用程序 - 是的，我知道你自己做的时候会更好，只是因为我认为我会节省一些时间才这样做。

在我看来，问题出在 firebase 模块上，但不确定。不知何故，它无法识别 Firebase 密钥。

import React, { Component } from 'react';
import langue from './Langue';
import { Admin, Resource, Delete } from 'admin-on-rest';
import { RestClient } from 'aor-firebase-client';
import UserIcon from 'material-ui/svg-icons/social/group';
import CommandeIcon from 'material-ui/svg-icons/action/assignment';
import RestaurantIcon from 'material-ui/svg-icons/maps/restaurant';
import LivreurIcon from 'material-ui/svg-icons/maps/local-shipping';
import Dashboard from './dashboard';
import { RestaurantList, RestaurantShow, RestaurantCreate, RestaurantEdit } from './restaurant';
import { ClientList, ClientShow } from './client';
import { LivreurList, LivreurCreate, LivreurEdit, LivreurShow } from './livreur';
import { CommandeList, CommandeShow } from './commande';
import CustomRoutes from './CustomRoutes';
import Authentification from './authentification/authClient';
import Statistique from './statistique';
import Parametres from './Parametres';
import StatistiquesIcon from 'material-ui/svg-icons/av/equalizer';
import ParametresIcon from 'material-ui/svg-icons/action/settings';
import {
  cyan500, cyan700,
  grey100, grey300, grey400, grey500,
  white, darkBlack, fullBlack
} from 'material-ui/styles/colors';
import { fade } from 'material-ui/utils/colorManipulator';
import spacing from 'material-ui/styles/spacing';
import firebase from 'firebase';
import Config from './Config';

const myTheme = {
    spacing: spacing,
    fontFamily: 'Roboto, sans-serif',
    palette: {
      primary1Color: '#f44336',
      primary2Color: cyan700,
      primary3Color: grey400,
      accent1Color: fade(darkBlack, 0.7),
      accent2Color: grey100,
      accent3Color: grey500,
      textColor: darkBlack,
      alternateTextColor: white,
      canvasColor: white,
      borderColor: grey300,
      disabledColor: fade(darkBlack, 0.3),
      pickerHeaderColor: cyan500,
      clockCircleColor: fade(darkBlack, 0.07),
      shadowColor: fullBlack,
    },
};


const messages = {
    en: langue,
};

const trackedResources = ['restaurant', 'client', 'livreur', 'commande']

firebase.initializeApp(Config.firebase);

class App extends Component {
    render() {
        return (
            <Admin title={Config.adminDashboardTitle} dashboard={Dashboard} theme={myTheme} customRoutes={CustomRoutes} authClient={Authentification} restClient={RestClient(trackedResources)} messages={messages}>
                <Resource options={{ label: 'aor.menu.restaurant' }} name="restaurant" list={RestaurantList} show={RestaurantShow} create={RestaurantCreate} edit={RestaurantEdit} remove={Delete} icon={RestaurantIcon} />
                <Resource options={{ label: 'aor.menu.customer' }} name="client" list={ClientList} show={ClientShow}  remove={Delete} icon={UserIcon}/>
                <Resource options={{ label: 'aor.menu.delivery_men' }} name="livreur" list={LivreurList} show={LivreurShow} create={LivreurCreate} edit={LivreurEdit} remove={Delete} icon={LivreurIcon} />
                <Resource options={{ label: 'aor.menu.command' }} name="commande" list={CommandeList} show={CommandeShow} icon={CommandeIcon}/>
                <Resource options={{ label: 'aor.menu.stats' }} name="statistique" list={Statistique} icon={StatistiquesIcon}/>
                <Resource options={{ label: 'aor.menu.conf' }} name="parametre" list={Parametres} icon={ParametresIcon}/>
            </Admin>
        );
    } 
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>

Firebase 密钥是从 Config.js 导入的 =>

const Config = {
    "adminDashboardTitle": "Admin",
    "partnerDashboardTitle": "Dashboard",
    "language": "en",
    "firebase": {
        "apiKey": "*****",
        "authDomain": "*****",
        "databaseURL": "*****",
        "projectId": "*****",
        "storageBucket": "*****",
        "messagingSenderId": "*****"
    },
    "currency": "$",
    "googleMapApiKey": "AIzaSyC98x3iPc-LMP3XfygPmBGl3S3zjF_hbZs",
    "paymentServer": {
        "link": "http://localhost:8080/",
        "username": "trainedpixels",
        "password": "Dijablo9513"
    }
};
export default Config;

也许有人可以看到语法或其他方面的问题？它让我疯狂。

当我尝试为 firebase 和 Config.js 进行测试时，一切似乎都正常...：

import React, {Component} from 'react';
import Config from './Config';
import firebase from 'firebase';

class Test extends Component {
    render() {
        console.log(Config.firebase);
        firebase.initializeApp(Config.firebase);
        return(
            <h1>Works</h1>
        );
    }
}

export default Test;

测试.jpg

错误.jpg

因此，当仪表板导入文件时，会以某种方式抛出错误 API Key 的错误：

import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest/lib/mui';
import { Link } from 'react-router-dom';
import RaisedButton from 'material-ui/RaisedButton';
import NbRestaurants from './NbRestaurants';
import NbCommandesEnAttente from './NbCommandesEnAttente';
import NbCommandesEnCoursPreparation from './NbCommandesEnCoursPreparation';
import NbCommandesEnCoursLivraison from './NbCommandesEnCoursLivraison';
import NbCommandesLivree from './NbCommandesLivree';
import NbCommandesAnnule from './NbCommandesAnnule';
import NbCommandes from './NbCommandes';
import NbLivreurs from './NbLivreurs';
import NbClients from './NbClients';
import PrixCommandeAnnulee from './PrixCommandeAnnulee';
import PrixCommandeAnnuleePayPal from './PrixCommandeAnnuleePayPal';
import PrixCommandeAnnuleeCB from './PrixCommandeAnnuleeCB';
import PrixCommandeValidee from './PrixCommandeValidee';
import PrixCommandeValideePayPal from './PrixCommandeValideePayPal';
import PrixCommandeValideeCB from './PrixCommandeValideeCB';
import { translate } from 'admin-on-rest';

const styles = {
    welcome: { marginBottom: '1em' },
    button: { width: '97%', margin: '1.5%' },
    flex: { display: 'flex', marginBottom: '2em' },
    leftCol: { flex: 1, marginRight: '1em' },
    rightCol: { flex: 1, marginLeft: '1em' },
    singleCol: { flex: 1 }
};
const Dashboard = ({translate}) => (
    <div>
        <Card style={styles.welcome}>
            <ViewTitle title={translate('aor.dashboard.title')} />
            <CardText>{translate('aor.dashboard.description')}</CardText>
            <RaisedButton
                primary
                style={styles.button}
                label={translate('aor.dashboard.admin')}
                containerElement={<Link to={{pathname: "/admin/create"}} />}
            />
        </Card>
        <ViewTitle title={translate('aor.dashboard.stats')} />
        <div style={styles.flex}>
            <div style={styles.leftCol}>
                <NbRestaurants />
            </div>
            <div style={styles.singleCol}>
                <NbLivreurs />
            </div>
            <div style={styles.rightCol}>
                   <NbClients />
            </div>
        </div>
        <div style={styles.flex}>
          <div style={styles.leftCol}>
              <NbCommandesEnAttente />
          </div>

          <div style={styles.singleCol}>
              <NbCommandesEnCoursPreparation />
          </div>

          <div style={styles.rightCol}>
              <NbCommandesEnCoursLivraison />
          </div>
        </div>
        <div style={styles.flex}>
            <div style={styles.leftCol}>
                <NbCommandesLivree />
            </div>

            <div style={styles.singleCol}>
                <NbCommandesAnnule />
            </div>

            <div style={styles.rightCol}>
                <NbCommandes />
            </div>
        </div>


        <div style={styles.flex}>
            <div style={styles.leftCol}>
                <PrixCommandeValideePayPal />
            </div>

            <div style={styles.singleCol}>
                <PrixCommandeValideeCB />
            </div>

            <div style={styles.rightCol}>
                <PrixCommandeValidee />
            </div>
        </div>

        <div style={styles.flex}>
            <div style={styles.leftCol}>
                <PrixCommandeAnnuleePayPal />
            </div>

            <div style={styles.singleCol}>
                <PrixCommandeAnnuleeCB />
            </div>

            <div style={styles.rightCol}>
                <PrixCommandeAnnulee />
            </div>
        </div>
    </div>
);

export default translate(Dashboard);

标签： reactjsfirebase