有角度的防火墙认证

Question

我用的是

• 角5
• AngularFire5
• [消]火源与火焰恢复

我想要实现的

我正在尝试制作一个简单的认证/登录和注册系统。实际上，我已经做了一个，虽然我遇到了一些问题，我想确定我正在寻找最好的方法来设置身份验证。

到目前为止我拥有的

auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class AuthService {

  authState: any = null;
  email = '';
  username = '';
  password = '';
  errorMessage = '';
  error: {name: string, message: string} = {name: '', message: ''};

  constructor(private afAuth: AngularFireAuth, private router: Router) {
    this.afAuth.authState.subscribe((auth) => {
      this.authState = auth
    });
  }
  get isUserEmailLoggedIn(): boolean {
    if (this.authState !== null) {
      return true
    } else {
      return false
    }
  }
  get currentUser(): any {
    return (this.authState !== null) ? this.authState : null;
  }
  get currentUserId(): string {
    return (this.authState !== null) ? this.authState.uid : ''
  }
  get currentUserName(): string {
    return this.authState['email']
  }
  signUpWithEmail(email: string, password: string) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((user) => {
        this.authState = user
      })
      .catch(error => {
        console.log(error)
        throw error
      });
  }
  loginWithEmail(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((user) => {
        this.authState = user
      })
      .catch(error => {
        console.log(error)
        throw error
      });
  }
  signOut(): void {
    this.afAuth.auth.signOut();
    this.router.navigate(['/'])
  }
  onSignUp(): void {
    this.clearErrorMessage()
    if (this.validateForm(this.email, this.password)) {
      this.signUpWithEmail(this.email, this.password)
        .then(() => {
          this.router.navigate(['/home'])
        }).catch(_error => {
          this.error = _error
          this.router.navigate(['/register'])
        })
    }
  }
  onLoginEmail(): void {
    this.clearErrorMessage()
    if (this.validateForm(this.email, this.password)) {
      this.loginWithEmail(this.email, this.password)
        .then(() => this.router.navigate(['/home']))
        .catch(_error => {
          this.error = _error
          this.router.navigate(['/login'])
        })
    }
  }
  validateForm(email: string, password: string): boolean {
    if (email.length === 0) {
      this.errorMessage = 'Please enter Email!'
      return false
    }
    if (password.length === 0) {
      this.errorMessage = 'Please enter Password!'
      return false
    }

    if (password.length < 6) {
      this.errorMessage = 'Password should be at least 6 characters!'
      return false
    }
    this.errorMessage = ''
    return true

  }
  clearErrorMessage() {
    this.errorMessage = '';
    this.error = {name: '', message: ''};
  }
}

link.service.ts

import { Injectable, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export interface Link { uid: string; url: string; shortURL: string; clicks: number }

@Injectable()
export class LinkService implements OnInit {
  url: string;
  shortURL: string;
  showAlert: boolean;
  links: Observable<any>;

  constructor(public authService: AuthService, private afs: AngularFirestore) {
        this.links = afs.collection('Links').valueChanges();
  }
  ngOnInit() {
  }
  createShortURL() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var length = 6;

    for(var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return this.shortURL = text;
  }
  addLink() {
    if (this.authService.isUserEmailLoggedIn) {
      this.createShortURL();
      this.afs.collection('Links').doc(this.shortURL).set({
        'uid': this.authService.currentUserId,
        'url': this.url,
        'shortURL': this.shortURL,
        'clicks': 0
      });
      this.clearFields();
      this.showAlert = false;
    } else {
      this.showAlert = true;
    }
  }
  clearFields() {
    return this.url = '';
  }
}

我被困在那里

提供的信息。我正在尝试在currentUserID中获取link.service.ts，尽管它正在以未定义的形式返回。但是，对于addLink()函数，this.authService.isUserEmailLoggedIn工作得非常好，我不知道为什么它没有返回正确的值。

Answer 1

你得弄到这样的身份。

 this.items = this.itemCollection.snapshotChanges().map(changes => {
          return changes.map(a => {
            const data = a.payload.doc.data();
            data.id = a.payload.doc.id;
            return data;
          });
        });

Answer 2

currentUserId()是一个您应该使用'uid': this.authService.currentUserId(),的函数