Question

我试图在Angular上添加身份验证（使用Cloud Firestore作为数据库）。在这里，我更改了数据库规则

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

现在，当我登录时，我将其作为控制台中的输出接收

https://ibb.co/DKzDqhd

我在凭证中接收到空值，然后转到组件，在其中我从数据库中读取数据并显示它们，我收到的错误为

core.js：12501错误FirebaseError：缺少权限或权限不足。在新的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)
} 
}

身份验证服务

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;
}
}
}

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

Angular Firestore身份验证（在凭证中接收空值）

0 个答案: