angular - 用户已通过身份验证,但出现“Firebase 存储:用户无权访问‘路径’”错误
问题描述
我已经在我的应用程序中实现了身份验证,并且在创建用户和身份验证方面没有问题。但是,现在我正在尝试将文件上传到 Firebase 存储,但它仅在我删除身份验证规则并公开访问时才有效。如果我保留默认规则以仅允许经过身份验证的用户访问(这是我想要的),我会收到错误消息:Firebase Storage: User does not have permission to access 'profile-image/test.PNG'.
我在 put 请求之前调用了一个方法来验证我的身份验证状态,并且我可以读/写到 firestore数据库没有问题,所以我确定我已通过身份验证。
我是一个完整的 FNG,所以这个问题很有可能是我做过/没有做过的愚蠢的事情。如果相关,我正在使用 Angular。我还使用 Google Cloud Platform 激活了一个结算帐户,但这并没有什么不同。
这是我的控制台日志,显示了我使用的引用、我尝试添加的文件(同样,当我公开访问时,这两个文件都可以正常工作)、来自身份验证状态调用的 uid,然后是错误:
STARTING UPLOAD SERVICE upload.service.ts:26
FIREBASE STORAGE REFERENCE: upload.service.ts:27
Reference {authWrapper: AuthWrapper, location: Location}
authWrapper: AuthWrapper {bucket_: "my-app.appspot.com", deleted_: false, app_: FirebaseAppImpl, storageRefMaker_: ƒ, requestMaker_: ƒ, …}
bucket: (...)
fullPath: (...)
location: Location {bucket: "my-app.appspot.com", path_: "profile-image/test.PNG"}
name: (...)
parent: (...)
root: (...)
storage: (...)
__proto__: Object
upload.service.ts:28
FILE CONTENTS:
upload.service.ts:29
File(286831) {name: "test.PNG", lastModified: 1542480795011, lastModifiedDate: Sat Nov 17 2018 13:53:15 GMT-0500 (Eastern Standard Time), webkitRelativePath: "", size: 286831, …}
upload.service.ts:24
USER AUTHENTICATED: Er6sWsDvEjM69WBAKxQffcbdPZG2
POST https://firebasestorage.googleapis.com/v0/b/{my-app-name}/o?name=profile-image%2Ftest.PNG 403
upload.service.ts:33
FirebaseStorageError {code_: "storage/unauthorized", message_: "Firebase Storage: User does not have permission to access 'profile-image/test.PNG'.",
serverResponse_: "{↵ "error": {↵ "code": 403,↵ "message": "Pe…n denied. Could not perform this operation"↵ }↵}", name_: "FirebaseError"}
code: (...)
code_: "storage/unauthorized"
message: (...)
message_: "Firebase Storage: User does not have permission to access 'profile-image/test.PNG'."
name: (...)
name_: "FirebaseError"
serverResponse: (...)
serverResponse_: "{↵ "error": {↵ "code": 403,↵ "message": "Permission denied. Could not perform this operation"↵ }↵}"
__proto__: Object
Firebase 存储规则
service firebase.storage {
match /b/my-app.appspot.com/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
(我也试过 request.auth.uid != null 但这并没有什么不同。)
我的上传服务:
import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/storage';
import { AuthService } from '../services/auth.service';
@Injectable({
providedIn: 'root'
})
export class UploadService {
constructor(
private authService: AuthService
) { }
pushUpload(uploadFile: File) {
console.log("STARTING UPLOAD SERVICE")
var storage = firebase.storage();
var storageRef = storage.ref();
var profileRef = storageRef.child('profile-image');
var docRef = profileRef.child(uploadFile.name);
this.authService.getAuthState().subscribe(auth => {
console.log("USER AUTHENTICATED: " + auth.uid);
})
console.log("FIREBASE STORAGE REFERENCE:")
console.log(docRef);
console.log("FILE CONTENTS:");
console.log(uploadFile);
docRef.put(uploadFile).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
}
}
environment.ts 中的 Firebase 配置:
import * as fb from 'firebase/app';
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
firebase: {
apiKey: "{my-api-key}",
authDomain: "my-app.firebaseapp.com",
databaseURL: "my-app.firebaseio.com",
projectId: "my-app",
storageBucket: "gs://my-app.appspot.com",
messagingSenderId: "####"
}
};
fb.initializeApp(environment.firebase);
我在控制台日志和 environment.ts 文件中用通用替换了一些识别信息。我还应该提到,在我添加之前,身份验证对我来说工作得很好,fb.initializeApp(environment.firebase);
但是一旦我尝试发出上传请求,我就会在没有这一行的情况下收到错误。
非常感谢您的任何建议,如果我应该提供更多信息,请告诉我!
解决方案
allow read, write: if request.auth != null;
意味着,您必须先登录才能在那里写字。
只需尝试一次,==
您就会发现它有效。
推荐阅读
- python - 在 QTreeView 的 QSortFilterProxyModel 中显示来自 filterAcceptsRow() 的已接受子代但不显示父代
- javascript - 同一行上两种不同形式的按钮
- android - 如何在 Android Studio 中的 Navigation Graph 上切换片段方向
- javascript - 带有接受声明函数的 then 方法的打字稿编码样式
- firebase - 我将我的 Firebase 规则更改为所有经过身份验证的用户。我需要在请求中更改什么 (Flutter)
- java - 如何从列表中删除重复记录并用枚举标记它?
- javascript - 科尔多瓦 div 溢出滚动导致整个屏幕滚动
- owl - 在 Protege 5 中,什么最能减慢推理者的速度?
- java - 将 application.properties 与非 bean 类一起使用
- laravel - 预处理控制器方法的模型类型提示路由参数中的主键