Angular Firestore身份验证（接收凭据中的null值）

Question

我尝试在Angular上添加身份验证（使用云firestore作为数据库）。这里我更改了数据库的规则

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

现在，当我登录时，我在控制台中接收到这作为一个输出

https://ibb.co/dkzdqhd

我在我的凭据中接收到null值，我继续到我的组件，在那里我从数据库中读取数据并显示它们。我接收到错误为

core.js:12501错误FirebaseError：权限缺失或不足。位于new FirestoreError（http://localhost:4200/vendor.js:89506:28)

.component.ts

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component, OnInit} from '@angular/core';
import { ProductsService } from '../services/products.service';
import { ItemsService } from '../services/items.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
products;
categories;
query;
filteredproducts;
subscription: Subscription;

constructor(private prservice: ProductsService, private iservice: 
ItemsService, private activatedrouter: ActivatedRoute) { }

ngOnInit() {
   this.subscription = this.iservice.getdata().subscribe(data => {
   this.products = data;
   this.activatedrouter.queryParams.subscribe(p => {
   this.query = p['category'];
   this.filteredproducts = this.categories?this.products.filter(p => 
   p.select === this.query):this.products;
  });
 });
 this.subscription = this.iservice.getitems().subscribe(categ => {
 this.categories = categ;
 });
 }

 OnDestroy() {
    this.subscription.unsubscribe();
 }
 }

注册组件

import { AuthService } from './../auth.service';
import { NgForm } from '@angular/forms';
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.scss']
})

export class SignupComponent implements OnInit {
@ViewChild('f') form:NgForm
constructor(private authservice:AuthService) { }

ngOnInit() {

}



onsubmit(f){
const email=f.email
const pass=f.password
this.authservice.signupuser(email,pass)


}

}

信号蛋白成分

import { AuthService } from './../auth.service';
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.scss']
 })


export class SigninComponent implements OnInit {
constructor(private authservice:AuthService){}
ngOnInit() {
}
onsubmit(f){
const email=f.email
const pass=f.password
this.authservice.signinuser(email,pass)
} 
}

auth服务

import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
@Injectable({
providedIn: 'root'
})

export class AuthService {
constructor() {  }

signupuser(email:string,pass:string){
firebase.auth().createUserWithEmailAndPassword(email,pass).catch(
  err=>console.log(err)
)

}
signinuser(email:string,pass:string){
firebase.auth().signInWithEmailAndPassword(email,pass).then(
  response=>console.log(response)
)
.catch(
  err=>console.log(err)
)
}
}

但是如果将我的数据库规则更改为

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}

我成功地从数据库中读取了数据

Answer 1

由于auth.service返回的credential值为NULL，您似乎没有正确访问。检查一下，问题可能就在那里。