在 React/Firebase 上更改用户的授权

Question

使用 React 和 Firebase，我有一个小页面，用户可以在其中对投票进行投票。

我正在努力实现所有用户（通过 Firebase 身份验证注册）都可以看到所有民意调查（保存在 Firebase 数据库中）。

目前只有在数据库中手动分配给投票的用户才能在他们的仪表板上看到投票。

下面是 Dashboard.js 文件。谁能帮我弄清楚我必须更改什么才能授权所有用户自动查看所有民意调查？

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;

Answer 1

不习惯 firebase，但我认为您必须从参数中删除 uid 才能从 firebase 获得所有结果。

this.userPollsRef = firebaseApp.database().ref(`user-polls/${uid}`)

喜欢这个

this.userPollsRef = firebaseApp.database().ref(`user-polls`)