FirebaseError: Missing or insufficient permissions only on page reload

Question

我有一个 angular 应用程序正在使用 "@angular/fire": "^6.1.5",

一切正常，我可以登录我的应用程序并从 firestore 获取记录，我遇到的唯一问题是当我重新加载浏览器页面时出现错误“FirebaseError：权限缺失或不足”

这是我用来登录的服务代码

        import { Injectable } from '@angular/core';
        import { AngularFireAuth } from '@angular/fire/auth';

        @Injectable({
          providedIn: 'root'
        })
        export class FirebaseService {

          isLoggedIn = false
          constructor(public firebaseAuth : AngularFireAuth) { 
            this.firebaseAuth.setPersistence("local")
          }
          async signin(email: string, password: string){
            await this.firebaseAuth.signInWithEmailAndPassword(email, password)
            .then(res => {
              this.isLoggedIn = true
              localStorage.setItem('user', JSON.stringify(res.user))
            }).catch(e => {
                
            });
          }
          async signup(email: string, password: string){
            await this.firebaseAuth.createUserWithEmailAndPassword(email, password)
            .then(res => {
              this.isLoggedIn = true
              localStorage.setItem('user', JSON.stringify(res.user))
            })
          }
          logout(){
            this.firebaseAuth.signOut()
            this.isLoggedIn = false
            localStorage.removeItem('user')
          }
        }

我正在使用 angular 路由，当我通过单击 link 导航到 http://localhost:4200/products 时一切正常，但是当我刷新浏览器时出现错误

导航点击 links 效果很好，唯一的问题是刷新时

这是获取产品的代码

      constructor(public db: AngularFirestore) {
          
          this.recordsCollection = this.db.collection('products', ref => ref.orderBy('date_created').limit(100));
          this.records = this.recordsCollection.snapshotChanges().pipe(
            map(actions => actions.map(a => {
              const data = a.payload.doc.data() as Product;
              const id = a.payload.doc.id;
              const doc = a.payload.doc
              return { id, doc, ...data };
            }))
          );
        }

这是我在 firestore 中的规则

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

Answer 1

经过多次尝试更改代码后，我决定更新所有 npm 依赖项，现在项目按预期运行，刷新浏览器后没有错误

angular 项目在这个依赖版本下运行良好

  "@angular/core": "^12.0.5",
  "@angular/fire": "^6.1.5",
  "angularfire2": "^5.4.2",
  "firebase": "^8.7.1",

所以这似乎是来自特定 angular/core 和 angularfire2 版本

的错误

Answer 2

经过几次尝试，我升级了 firebase 模块：

ng update @angular/fire --allow-dirty --force

从版本 6.1.5 到 7.2.0

它终于完成了任务。

FirebaseError: Missing or insufficient permissions only on page reload

FirebaseError: Missing or insufficient permissions only on page reload

angularjs

firebase

google-cloud-firestore