尝试使用 Ionic4 和 Angular 6 将文档添加到 Firebase 时出错 - 错误：PERMISSION_DENIED：权限被拒绝

Question

我正在尝试使用 Ionic 4, Angular 6 and Firebase 实现 CRUD 调用，但出现以下错误。我在启用测试的模式下在 firebase 中创建了一个数据库，然后在其中添加了一个名为 infos 的集合。现在，当我运行该应用程序时，它既不显示任何内容，而且当我尝试添加任何新文档时出现错误。

core.js:1673 ERROR Error: Uncaught (in promise): Error: PERMISSION_DENIED: Permission denied
Error: PERMISSION_DENIED: Permission denied
    at index.cjs.js:13076
    at exceptionGuard (index.cjs.js:690)
    at Repo.push../node_modules/@firebase/database/dist/index.cjs.js.Repo.callOnCompleteCallback (index.cjs.js:13067)
    at index.cjs.js:12844
    at index.cjs.js:12019
    at PersistentConnection.push../node_modules/@firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ (index.cjs.js:12052)
    at Connection.push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onDataMessage_ (index.cjs.js:11337)
    at Connection.push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onPrimaryMessageReceived_ (index.cjs.js:11331)
    at WebSocketConnection.onMessage (index.cjs.js:11232)
    at WebSocketConnection.push../node_modules/@firebase/database/dist/index.cjs.js.WebSocketConnection.appendFrame_ (index.cjs.js:10837)
    at index.cjs.js:13076
    at exceptionGuard (index.cjs.js:690)
    at Repo.push../node_modules/@firebase/database/dist/index.cjs.js.Repo.callOnCompleteCallback (index.cjs.js:13067)
    at index.cjs.js:12844
    at index.cjs.js:12019
    at PersistentConnection.push../node_modules/@firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ (index.cjs.js:12052)
    at Connection.push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onDataMessage_ (index.cjs.js:11337)
    at Connection.push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onPrimaryMessageReceived_ (index.cjs.js:11331)
    at WebSocketConnection.onMessage (index.cjs.js:11232)
    at WebSocketConnection.push../node_modules/@firebase/database/dist/index.cjs.js.WebSocketConnection.appendFrame_ (index.cjs.js:10837)
    at resolvePromise (zone.js:814)
    at Deferred.reject (zone.js:724)
    at index.cjs.js:488
    at index.cjs.js:13078
    at exceptionGuard (index.cjs.js:690)
    at Repo.push../node_modules/@firebase/database/dist/index.cjs.js.Repo.callOnCompleteCallback (index.cjs.js:13067)
    at index.cjs.js:12844
    at index.cjs.js:12019
    at PersistentConnection.push../node_modules/@firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ (index.cjs.js:12052)
    at Connection.push../node_modules/@firebase/database/dist/index.cjs.js.Connection.onDataMessage_ (index.cjs.js:11337)

我正在 app.component.ts 中初始化 firebase 连接 -

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import * as firebase from 'firebase';

const config = {
  apiKey: 'AIzadfffX6_5UEzzbGYG6w0LPVQ',
  authDomain: 'ionic1.firebaseapp.com',
  databaseURL: 'https://ionic1.firebaseio.com',
  projectId: 'ionic1',
  storageBucket: 'ionic1.appspot.com',
  messagingSenderId: '943876044394'
};

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    firebase.initializeApp(config);
  }
}

home.page.ts -

import { Component } from '@angular/core';

import * as firebase from 'firebase';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  infos = [];
  ref = firebase.database().ref('infos/');

  constructor(public router: Router, public loadingController: LoadingController) {
    this.ref.on('value', resp => {
      this.infos = [];
      this.infos = snapshotToArray(resp);
    });
  }
}

export const snapshotToArray = snapshot => {
  const returnArr = [];
  alert(JSON.stringify(snapshot));

  snapshot.forEach(childSnapshot => {
      const item = childSnapshot.val();
      item.key = childSnapshot.key;
      returnArr.push(item);
  });

  return returnArr;
};

在home.page.html，下面是我的html代码-

<ion-header>
  <ion-toolbar>
    <ion-title>
      Info List
    </ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/create"><ion-icon name="add-circle"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let info of infos">
      <ion-item detail lines="full" routerLink="/detail/{{info.key}}">
        <ion-icon name="desktop" slot="start"></ion-icon>
        {{info.info_title}}
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="primary" (click)="edit(info.key)">EDIT</ion-item-option>
        <ion-item-option color="danger" (click)="delete(info.key)">DELETE</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

那个，有create.page.ts-

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import * as firebase from 'firebase';


@Component({
  selector: 'app-create',
  templateUrl: './create.page.html',
  styleUrls: ['./create.page.scss'],
})
export class CreatePage implements OnInit {

  ref = firebase.database().ref('infos/');
  infoForm: FormGroup;

  constructor(private route: ActivatedRoute,
    public router: Router,
    private formBuilder: FormBuilder) {
      this.infoForm = this.formBuilder.group({
        'info_title' : [null, Validators.required],
        'info_description' : [null, Validators.required]
      });
    }

  ngOnInit() {
  }

  saveInfo() {
    const newInfo = firebase.database().ref('infos/').push();
    newInfo.set(this.infoForm.value);
    this.router.navigate(['/home']);
  }

}

而create.page.html 有 -

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Create Info</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="infoForm">
    <ion-item>
      <ion-label position="floating">Info Title</ion-label>
      <ion-input type="text" formControlName="info_title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Info Description</ion-label>
      <ion-input type="text" formControlName="info_description"></ion-input>
    </ion-item>
    <ion-button shape="round" color="primary" expand="block" [disabled]="!infoForm.valid" (click)="saveInfo()">Save</ion-button>
  </form>
</ion-content>

Answer 1

经过大量调试，我得到了答案here。 我不知道有一种叫做 firestore 的东西，并且正在将两者混合在一起 - firestore 和 firebase。

Answer 2

如果您使用的是 firebase.database()，您可能还需要将数据库读/写规则设置为 true。这为我解决了。