angular - 用户已通过身份验证，但 : "Firebase Storage: User does not have permission to access ' path'"error coming up

Question

我已经在我的应用中实现了身份验证，并且在创建用户和身份验证方面没有任何问题。但是，现在我尝试将文件上传到 Firebase Storage，但它只会当我删除身份验证规则并将访问权限公开时，它就可以工作。如果我将默认规则保留为仅允许经过身份验证的用户访问(这正是我想要的)，则会收到错误:Firebase Storage:用户无权访问“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); 之前，身份验证对我来说工作得很好，但是当我尝试发出上传请求时，如果没有此行，我就会收到错误。

提前非常感谢您提供的任何建议，如果我需要提供更多信息，请告诉我!

Answer 1

允许读、写:if request.auth != null;

意味着您必须先登录才能在那里写入。

只需使用 == 尝试一次，您就会发现它有效。