在 Firebase 中访问存储时，基于 React-Redux 的网络应用中出现"存储/未知"或"存储/未经授权"问题

Question

我正在使用React Redux构建LinkedIn克隆(更新到最新版本(。我添加了一个发布功能，用户可以在其中发布图片和文本。到目前为止，firebase已成功连接到我的Web应用程序，因为登录功能运行良好，但当我发布图像时，它不会上传到firebase Storage和storage/unknown index.js:64或storage/unauthorized，控制台中会出现此消息。

(注意：下面的代码中提到了src/actions/index.js的index.js:64-第64行(

这不是一个错误，因为Web应用程序运行良好，但上述功能不起作用。已根据需要正确安装和导入Firebase和auth、storage、provider等其他组件。

src/actions/index.js

import { auth, provider, storage } from "../firebase";
import db from "../firebase";
import { SET_USER } from "./actionType";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
export const setUser = (payload) => ({
type: SET_USER,
user: payload,
});
//Code for Sign-In, User Authentication and Sign-Out functionality
export function postArticleAPI(payload) {
return (dispatch) => {
if (payload.image != "") {
const upload = storage
.ref(`image/${payload.image.name}`)
.put(payload.image);
upload.on(
"state_changed",
(snapshot) => {
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Progess: ${progress}%`);
if (snapshot === `RUNNING`) {
console.log(`Progress: ${progress}%`);
}
},
**(error) => console.log(error.code)**,                                 //line 64, refer 1st para
async () => {
const downloadURL = await upload.snapshot.ref.getDownloadURL();
db.collection("articles").add({
actor: {
description: payload.user.email,
title: payload.user.displayName,
date: payload.timestamp,
image: payload.user.photoURL,
},
video: payload.video,
sharedImg: downloadURL,
comments: 0,
description: payload.description,
});
}
);
}
};
}

src/components/PostModal.js

import { useState } from "react";
import styled from "styled-components";
import ReactPlayer from "react-player";
import { connect } from "react-redux";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
import { postArticleAPI } from "../actions";
const PostModal = (props) => {
const [editorText, setEditorText] = useState("");
const [shareImage, setShareImage] = useState("");
const [videoLink, setVideoLink] = useState("");
const [assetArea, setAssetArea] = useState("");
const postArticle = (e) => {
console.log("start");                        //debugging, this message logs in console
e.preventDefault();
if (e.target !== e.currentTarget) {
console.log("insideif");                   //debugging, this message doesn't logs in console
return;
}
const payload = {
image: shareImage,
video: videoLink,
user: props.user,
description: editorText,
timestamp: firebase.firestore.Timestamp.now(),
};
props.postArticle(payload);
reset(e);
};
return (
<>
{props.showModal === "open" && (
<Container>
<Content>
//Fronted for Post Functionality
<ShareCreation>
//Fronted for Post Functionality
<PostButton
disabled={!editorText ? true : false}
onClick={(event) => postArticle(event)}
>
Post
</PostButton>
</ShareCreation>
</Content>
</Container>
)}
</>
);
};
//css: styled.divs, styled.buttons, etc.
const mapStateToProps = (state) => {
return {
user: state.userState.user,
};
};
const mapDispatchToProps = (dispatch) => ({
postArticle: (payload) => dispatch(postArticleAPI(payload)),
});
export default connect(mapStateToProps, mapDispatchToProps)(PostModal);

控制台输出：

start                      PostModal.js:34
Progess: 0%                index.js:59
storage/unauthorized       index.js:64

单击Web应用程序中的Post按钮后，Firebase Storage中没有出现图像，应该会出现图像。我该怎么办？

Answer 1

问题已解决。只需转到Firebase->存储->规则并按如下方式编辑规则：

rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}