Firestore 规则 request.auth 始终为空

Question

我的 firestore.rules 总是拒绝我的权限缺失或不足的请求，或者它是这么说的。在使用 .valueChanges() 注册到我的 collection 之前，我使用电子邮件和密码登录，但它似乎不起作用。我过去曾多次使用此配置，没有出现任何问题。你能看出我在这里遗漏了什么吗？

我的 firestore.rules 看起来像这样：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

这是一个重现问题的简单组件：

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  showItems = false;
  items$: Observable<any[]>;

  constructor(
    private firestore: AngularFirestore,
    private auth: AngularFireAuth
  ) {
    this.items$ = firestore
      .collection('items')
      .valueChanges()
      .pipe(
        catchError((err) => {
          console.error(err);
          return of([]);
        })
      );
  }

  onAddItem() {
    return this.firestore
      .collection('items')
      .add({
        name: 'item',
      })
      .catch((err) => {
        console.error(err);
      });
  }

  onSignIn() {
    return this.auth
      .signInWithEmailAndPassword('timy@test.com', 'timothee')
      .then(() => {
        console.log('logged in!');
      })
      .catch((err) => {
        console.error(err);
      });
  }

  onShowItems() {
    this.showItems = !this.showItems;
  }
}

对应模板：

  <div>
    <button (click)="onSignIn()">Login</button>
    <button (click)="onShowItems()">Show Items</button>
  </div>
  <div *ngIf="showItems">
    <ng-container *ngIf="items$ | async as items; else loading">
      <div *ngFor="let item of items">
        {{ item.name }}
      </div>
    </ng-container>
    <ng-template #loading> Loading... </ng-template>
    <div>
      <button (click)="onAddItem()">Add Item</button>
    </div>
  </div>
</div>

我的 package.json 看起来像这样：

"@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/fire": "^6.1.5",
    "firebase": "^7.0 || ^8.0"

将 firestore.rules 更改为 allow read, write: if true; 后，我成功访问了我的数据库。

非常感谢您观看...非常感谢！

Answer 1

您在用户登录之前将侦听器附加到数据库。为防止这种情况发生 use an auth state listener:

  constructor(
    private firestore: AngularFirestore,
    private auth: AngularFireAuth
  ) {

    auth.authState.subscribe((user) => {
      if (user) {
        // User is signed in.
        this.items$ = firestore
          .collection('items')
          .valueChanges()
          .pipe(
            catchError((err) => {
              console.error(err);
              return of([]);
            })
          );
      }
    });
  }

Answer 2

将 Firebase 降级回版本 8.6.1 解决了这个问题。

观看 https://github.com/firebase/firebase-js-sdk/issues/4932 以跟踪 Firebase JS SDK 上的问题。

Answer 3

将 Firebase 降级到版本 8.6.1

npm install firebase@8.6.1

Firestore 规则 request.auth 始终为空

Firestore rules request.auth always null

javascript

angular

firebase

google-cloud-firestore

angularfire