我已经将我的应用的身份验证部分与Google合作,但在此之后我无法获取数据库数据的快照。
我想登录,收集用户信息,如果没有数据所有者,则将当前用户设置为所有者。
以下是身份验证代码段
login() {
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user;
this.setState({
user
});
});
const storeRef = base.database().ref(this.props.storeId);
storeRef.once("value")
.then((snapshot) => {
const data = snapshot.val() || {};
if(!data.owner) {
storeRef.set({
owner: this.user
});
}
});
}
完整的组件
import React from 'react';
import AddFishForm from './AddFishForm';
import PropTypes from 'prop-types';
import base, { auth, provider } from '../base';
import * as firebase from 'firebase';
export default class Inventory extends React.Component {
constructor() {
super();
this.renderInventory = this.renderInventory.bind(this);
this.handleChange = this.handleChange.bind(this);
this.renderLogin = this.renderLogin.bind(this);
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.state = {
user: null,
owner: null
}
}
handleChange(e, key) {
const fish = this.props.fishes[key];
const updatedFish = {
...fish,
[e.target.name]: e.target.value
}
this.props.updateFish(key, updatedFish);
}
login() {
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user;
this.setState({
user
});
});
const storeRef = base.database().ref(this.props.storeId);
storeRef.once("value")
.then((snapshot) => {
const data = snapshot.val() || {};
if(!data.owner) {
storeRef.set({
owner: this.user
});
}
});
}
logout() {
}
renderLogin() {
return (
<nav className="login">
<h2>Inventory</h2>
<p>Sign in to manage your store's inventory</p>
<button className="facebook" onClick={() => this.login()}>
Log in with Google</button>
</nav>
)
}
renderInventory(key) {
const fish = this.props.fishes[key];
return(
<div className="fish-edit" key={key}>
<input type="text" name="name" value={fish.name} placeholder="Fish Name"
onChange={(e) => this.handleChange(e, key)} />
<input type="text" name="price" value={fish.price} placeholder="Fish Price"
onChange={(e) => this.handleChange(e, key)} />
<select type="text" name="status" value={fish.status} placeholder="Fish Status"
onChange={(e) => this.handleChange(e, key)}>
<option value="available">Fresh!</option>
<option value="unaivilable">Sold Out!</option>
</select>
<textarea type="text" name="desc" value={fish.desc} placeholder="Fish Desc"
onChange={(e) => this.handleChange(e, key)}></textarea>
<input type="text" name="image" value={fish.image} placeholder="Fish Image"
onChange={(e) => this.handleChange(e, key)}/>
<button onClick={() => this.props.removeFish(key)}>Remove Fish</button>
</div>
);
}
render() {
const logout = <button>Log out!</button>
if(!this.state.uid) {
return <div>{this.renderLogin()}</div>
}
if(this.state.uid !== this.state.owner) {
return(
<div>
<p>Sorry, you are not the owner of this store!</p>
{logout}
</div>
)
}
return(
<div>
<h2>Inventory</h2>
{logout}
{Object.keys(this.props.fishes).map(this.renderInventory)}
<AddFishForm addFish={this.props.addFish} />
<button onClick={this.props.loadSamples}>Load Sample Fishes</button>
</div>
)
}
}
Inventory.propTypes = {
updateFish: PropTypes.func.isRequired,
fishes: PropTypes.object.isRequired,
removeFish: PropTypes.func.isRequired,
addFish: PropTypes.func.isRequired,
loadSamples: PropTypes.func.isRequired,
storeId: PropTypes.string.isRequired
}
如果需要,还将firebase对象作为基础
import Rebase from 're-base';
import * as firebase from 'firebase';
const app = firebase.initializeApp({
apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
projectId: "catch-of-the-day-ethan-fie",
storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});
const base = Rebase.createClass(app.database());
export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export default base;
答案 0 :(得分:1)
您使用Rebase
实例而不是firebase
实例,从您的初始化代码修复您的问题导出firebase实例
import Rebase from 're-base';
import * as firebase from 'firebase';
const app = firebase.initializeApp({
apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
projectId: "catch-of-the-day-ethan-fie",
storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});
const base = Rebase.createClass(app.database());
export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const firebase = app; // <------ export firebase
export default base;
并在您的组件中导入firebase
import base, { auth, provider , firebase } from '../base';
现在使用firebase
代替base
const storeRef = firebase.database().ref(this.props.storeId);
storeRef.once("value")
.then((snapshot) => {
const data = snapshot.val() || {};
console.log(data);
if(!data.owner) {
storeRef.set({
owner: this.user
});
}
});
答案 1 :(得分:0)
对我来说,在最近的更新中我使用
解决了它var firebase = require('firebase/app');
require('firebase/database');