Firestore 规则 request.auth 始终为空答案

【问题标题】：Firestore rules request.auth always nullFirestore 规则 request.auth 始终为空
【发布时间】：2021-08-24 22:13:38
【问题描述】：

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

我的 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; 后，我成功访问了我的数据库。

非常感谢您查看它...非常感谢！

【问题讨论】：

标签： javascript angular firebase google-cloud-firestore angularfire

【解决方案1】：

将 Firebase 降级到 8.6.1 版

npm install firebase@8.6.1

【讨论】：

【解决方案2】：

您在用户登录之前将侦听器附加到数据库。为了防止这种情况发生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([]);
            })
          );
      }
    });
  }

【讨论】：

不幸的是，这还不足以解决问题，但它仍然可能是问题的一部分。这是在 AngularFire 上打开的一个问题，描述了我遇到的症状：github.com/angular/angularfire/issues/2838
假设我在访问我的集合的组件上使用 AngularFire 路由保护，在检查身份验证状态后我是否还需要订阅集合？

【解决方案3】：

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

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

【讨论】：