Reactjs 更改React/Firebase上用户的授权
使用React和Firebase,我有一个小页面,用户可以在其中投票 我试图实现所有用户都能看到(通过Firebase身份验证注册的)所有轮询(保存在Firebase数据库上) 目前,只有在数据库中手动分配给轮询的用户才能在其仪表板上看到轮询 下面是Dashboard.js文件。有人能帮我弄清楚我需要做什么更改才能授权所有用户自动查看所有投票吗Reactjs 更改React/Firebase上用户的授权,reactjs,firebase,firebase-realtime-database,firebase-authentication,Reactjs,Firebase,Firebase Realtime Database,Firebase Authentication,使用React和Firebase,我有一个小页面,用户可以在其中投票 我试图实现所有用户都能看到(通过Firebase身份验证注册的)所有轮询(保存在Firebase数据库上) 目前,只有在数据库中手动分配给轮询的用户才能在其仪表板上看到轮询 下面是Dashboard.js文件。有人能帮我弄清楚我需要做什么更改才能授权所有用户自动查看所有投票吗 import React from 'react'; import { Link } from 'react-router'; import { fir
import React from 'react';
import { Link } from 'react-router';
import { firebaseApp } from '../utils/firebase';
import Helmet from "react-helmet";
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import Dialog from 'material-ui/Dialog';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import Loading from './Loading';
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
dialogOpen: false,
loading: true,
polls: [] //items like { id: 34324, title: 'sdf'}
};
this.poll2Delete = '';
this.poll2DeleteTitle = ''
this.handleClose = this.handleClose.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
componentWillMount() {
//const uid = getLocalUserId();
firebaseApp.auth().onAuthStateChanged(user => {
if (user) { //this can get called after componentWillUnmount, make sure its there to avoid errors
const uid = user.uid;
this.userPollsRef = firebaseApp.database().ref(`user-polls/${uid}`);
//check if user has no polls to quit loading indicator
this.userPollsRef.once('value').then(snapshot => {
if (!snapshot.hasChildren()) {
if (this.mounted) {
this.setState({ loading: false });
}
}
});
this.userPollsRef.on('child_added', ((newPollIdSnapshot) => {
const pollId = newPollIdSnapshot.key;
firebaseApp.database().ref(`polls/${pollId}/title`).once('value').then(snapshot => {
const title = snapshot.val();
const polls = this.state.polls;
polls.push({ title: title, id: pollId })
if (this.mounted) {
this.setState({
polls: polls,
loading: false
});
}
});
})).bind(this);
this.userPollsRef.on('child_removed', ((removedPollIdSnapshot) => {
const pollId = removedPollIdSnapshot.key;
const polls = this.state.polls.filter(poll => poll.id !== pollId);
if (this.mounted) {
this.setState({
polls: polls
});
}
})).bind(this);
}
});
this.mounted = true; //the callbacks above can be called after componentWillUnmount(), to avoid errors, check
}
componentWillUnmount() {
this.userPollsRef.off();
this.mounted = false;
}
handleOpen(pollId) {
this.setState({ dialogOpen: true });
this.poll2Delete = pollId;
this.poll2DeleteTitle = this.state.polls.find(poll => poll.id === this.poll2Delete).title;
}
handleClose() {
this.setState({ dialogOpen: false });
}
handleDelete() {
// updating to null deletes
const updates = {};
updates[`/polls/${this.poll2Delete}`] = null;
updates[`/user-polls/${firebaseApp.auth().currentUser.uid}/${this.poll2Delete}`] = null;
firebaseApp.database().ref().update(updates);
this.setState({ dialogOpen: false });
}
render() {
const actions = [
<FlatButton
label="Cancel"
primary={false}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Delete"
primary={true}
onTouchTap={this.handleDelete}
/>,
];
let pollsUIs = this.state.polls.map((poll) => {
return (
<div key={poll.id} >
<IconButton
iconClassName="fa fa-trash"
/>
<Link to={`/polls/poll/${poll.id}`}>
<FlatButton
label={poll.title}
style={{ textAlign: 'left', width: '50%' }}
/>
</Link>
<Divider />
</div>
);
});
return (
<div className="row">
<div className="col-sm-12 text-xs-center">
<Helmet title="Dashboard" />
<Paper>
<br />
<h2> Current Polls </h2>
<br />
<Dialog
actions={actions}
modal={false}
open={this.state.dialogOpen}
onRequestClose={this.handleClose}
>
Delete "{this.poll2DeleteTitle}"?
</Dialog>
<br /><br />
{pollsUIs}
<Loading loading={this.state.loading} />
<br /><br />
</Paper>
</div>
</div>
);
}
}
export default Dashboard;
从“React”导入React;
从“反应路由器”导入{Link};
从“../utils/firebase”导入{firebaseApp};
从“反应头盔”导入头盔;
从“物料界面/平面按钮”导入平面按钮;
从“物料界面/图标按钮”导入图标按钮;
从“材料界面/对话框”导入对话框;
从“物料界面/纸张”导入纸张;
从“物料界面/分割器”导入分割器;
从“./Loading”导入加载;
类Dashboard扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
dialogOpen:false,
加载:对,
轮询:[]//像{id:34324,title:'sdf'}这样的项目
};
this.poll2Delete='';
this.poll2DeleteTitle=''
this.handleClose=this.handleClose.bind(this);
this.handleDelete=this.handleDelete.bind(this);
}
组件willmount(){
//const uid=getLocalUserId();
firebaseApp.auth().onAuthStateChanged(用户=>{
如果(user){//在componentWillUnmount之后可以调用它,请确保它在那里以避免错误
const uid=user.uid;
this.userPollsRef=firebaseApp.database().ref(`user polls/${uid}`);
//检查用户是否没有要退出加载指示器的轮询
这个.userPollsRef.once('value')。然后(快照=>{
如果(!snapshot.hasChildren()){
如果(本安装){
this.setState({loading:false});
}
}
});
this.userPollsRef.on('child_added',((newPollIdSnapshot)=>{
const pollId=newPollIdSnapshot.key;
firebaseApp.database().ref(`polls/${pollId}/title`)。一次('value')。然后(快照=>{
const title=snapshot.val();
const polls=this.state.polls;
push({title:title,id:pollId})
如果(本安装){
这是我的国家({
民意调查:民意调查,
加载:错误
});
}
});
})).约束(本);
this.userPollsRef.on('child_removed',((removedPollIdSnapshot)=>{
const pollId=removedPollIdSnapshot.key;
const polls=this.state.polls.filter(poll=>poll.id!==pollId);
如果(本安装){
这是我的国家({
民意测验:民意测验
});
}
})).约束(本);
}
});
this.mounted=true;//可以在componentWillUnmount()之后调用上面的回调,为避免错误,请检查
}
组件将卸载(){
this.userPollsRef.off();
这是错误的;
}
山猫{
this.setState({dialogOpen:true});
this.poll2Delete=pollId;
this.poll2DeleteTitle=this.state.polls.find(poll=>poll.id==this.poll2Delete.title);
}
handleClose(){
this.setState({dialogOpen:false});
}
handleDelete(){
//更新为空删除
常量更新={};
更新[`/polls/${this.poll2Delete}`]=null;
更新[`/user polls/${firebaseApp.auth().currentUser.uid}/${this.poll2Delete}`]=null;
firebaseApp.database().ref().update(更新);
this.setState({dialogOpen:false});
}
render(){
常量动作=[
,
,
];
让pollsUIs=this.state.polls.map((poll)=>{
返回(
);
});
返回(
当前民意测验
删除“{this.poll2DeleteTitle}”?
{pollsUIs}
);
}
}
导出默认仪表板;
不适用于firebase,但我认为您必须从参数中删除uid才能从firebase获得所有结果
this.userPollsRef = firebaseApp.database().ref(`user-polls/${uid}`)
喜欢这个
this.userPollsRef = firebaseApp.database().ref(`user-polls`)