离线持久性在 AngularJS 的 Cloud Firestore 中不起作用（如何调试？）答案

【问题标题】：Offline Persistence Not working in Cloud Firestore in AngularJS (how to debug?)离线持久性在 AngularJS 的 Cloud Firestore 中不起作用（如何调试？）
【发布时间】：2020-06-29 06:12:39
【问题描述】：

我正在尝试在 AngularJS 网络应用程序中启用 Cloud Firestore 的磁盘持久性功能，但结果好坏参半。如果我禁用 Internet 连接，数据确实会保留，但是当我重新启用连接时，我对数据库的编辑不会保留。

我从app.module.ts 打电话给enablePersistence()（正如建议的here）。

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,MatToolbarModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule,    
   AngularFireModule.initializeApp(environment.firebase),
   AngularFirestoreModule.enablePersistence(), /// <------- here's the call to enable persistence
   FirebaseUIModule.forRoot(firebaseUiAuthConfig),

为了测试它，我执行以下步骤：

打开互联网，加载应用程序
开启飞行模式
单击按钮删除文档 — 这很有效，我可以从几个不同的组件中确认这一点。
关闭飞行模式
在短暂的暂停后，已删除的项目再次出现在列表中。

（如果我添加或编辑文档，也会遇到同样的问题。）

我已经在 Chrome 和 Firefox（无论是否显示开发者控制台）以及本地和已部署的应用版本中尝试过此操作。

重新启用互联网连接后不久，我在控制台中收到此错误消息，很遗憾我无法理解。

zone-evergreen.js:651 Unhandled Promise rejection: Missing or insufficient permissions. ; Zone: <root> ; Task: Promise.then ; Value: FirebaseError: Missing or insufficient permissions.
    at new FirestoreError (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:181062:28)
    at https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:204117:46
    at Y.<anonymous> (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:204061:21)
    at nb (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206198:195)
    at Y.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.g.dispatchEvent (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206196:304)
    at Z.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.Z.ua (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206249:35)
    at Ad.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.g.Fa (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206240:203)
    at ic (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206204:371)
    at kc (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206202:354)
    at M.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.g.Ja (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206201:437) FirebaseError: Missing or insufficient permissions.
    at new FirestoreError (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:181062:28)
    at https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:204117:46
    at Y.<anonymous> (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:204061:21)
    at nb (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206198:195)
    at Y.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.g.dispatchEvent (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206196:304)
    at Z.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.Z.ua (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206249:35)
    at Ad.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.g.Fa (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206240:203)
    at ic (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206204:371)
    at kc (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206202:354)
    at M.push../node_modules/@firebase/webchannel-wrapper/dist/index.esm.js.g.Ja (https://XXXXXXXXXXXX.firebaseapp.com/vendor-es2015.js:206201:437)

【问题讨论】：

这是安全规则拒绝查询的问题。请编辑问题以显示失败的特定查询以及会影响它的规则。
你的意思是我进行的 Firebase 调用，然后被缓存了吗？
您的 Firebase 规则如何？也许您的应用程序在切换到在线/离线期间以某种方式丢失了身份验证，如果您的规则不允许未经身份验证的用户进行交互，您将遇到Missing or insufficient permissions 错误。请分享它们，以便我们进一步帮助您

标签： angularjs firebase google-cloud-firestore

【解决方案1】：

我知道这有点晚了，但我把它留到以后：

确保您没有在Firebase 上发布两个网站确保您没有发出与databases 不同的权限当您应用的站点有两个不同的请求并且每个站点存储的数据彼此不同时，就会发生该错误。这是一个简单的例子：

export interface Items {
  name: string;
  price: Price;
}

不同的请求：

export interface Items {
  name: string;
  price: Price;
  description: string;
}

您现在可以确保您传递的数据与您在另一个文件或位置中请求的数据没有不同

【讨论】：