reactjs - Firebase 错误：用户无权访问

Question

我正在开发一个 snapchat 克隆，我想使用在网络摄像头上单击的图像存储在 firestore 中并将其用作预览。该代码是完美的，但它显示了与 firebase 相关的错误。我不知道该怎么做。这是我的代码

import "./Preview.css"
import { resetCameraImage, selectCameraImage } from './../features/cameraSlice';
import { useSelector, useDispatch } from 'react-redux';
import { useHistory } from 'react-router';
import CloseIcon from "@material-ui/icons/Close";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import CreateIcon from "@material-ui/icons/Create";
import NoteIcon from "@material-ui/icons/Note";
import MusicNoteIcon from "@material-ui/icons/MusicNote";
import AttachFileIcon from "@material-ui/icons/AttachFile";
import CropIcon from "@material-ui/icons/Crop";
import TimerIcon from "@material-ui/icons/Timer";
import SendIcon from "@material-ui/icons/Send";
import { v4 as uuid } from "uuid";
import { db, storage } from "./firebase";
import  firebase  from 'firebase';

function Preview() {

    const cameraImage = useSelector(selectCameraImage);
    const history = useHistory();
    const dispatch = useDispatch();

    useEffect(() => {
        if (!cameraImage) {
            history.replace('/');
        }
    }, [cameraImage, history]);

    const closePreview = () => {
        dispatch(resetCameraImage());
    }

    const sendPost = () => {
        const id = uuid();
        const uploadTask = storage.ref(`posts/${id}`).putString(cameraImage, "data_url");

        uploadTask.on('state_changed', null, (error) => {
            // error function
            console.log(error);
        },
        () => {
            // complete function
            storage.ref('posts').child(id).getDownloadURL().then((url) => {
                db.collection('posts').add({
                    imageUrl: url,
                    username: "PAPA React",
                    read: false,
                    //profilePic,
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                });
                history.replace('/chats');
            });
        }
        );
    };

    return (
        <div className="preview">
            <CloseIcon className="preview__close" onClick={closePreview}/>
            <div className="preview__toolbarRight">
                <TextFieldsIcon />
                <CreateIcon />
                <NoteIcon />
                <MusicNoteIcon />
                <AttachFileIcon />
                <CropIcon />
                <TimerIcon />
            </div>
            <img src={cameraImage} alt="" />
            <div className="preview__footer" onClick={sendPost} >
                <h2>Send Now</h2>
                <SendIcon fontSize="small" className="preview__sendIcon" />
            </div>
        </div>
    )
}

export default Preview

抛出错误

我的 Firebase 规则设置

替代方法上的相同错误

替代方法上的相同错误

标签： reactjsfirebasegoogle-cloud-firestorefirebase-security

Answer 1

该错误表示用户无权访问您的 Firebase 存储。为 Firebase 存储添加规则以授予用户访问权限。例如：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}