Question

原谅我，我不太了解 RxJS 。

我想知道如何从Firebase中提取用户UID作为我已创建的服务。并在组件内实现它。

这是代码。

文件名：auth.service.ts

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

import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';

declare var $: any;
declare var jQuery: any;

interface User {
    uid: string;
    email: string;
    photoURL?: string;
    displayName?: string;
}

@Injectable()
export class AuthService {

    user: Observable<User>;

    constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) {
        this.user = this.afAuth.authState.switchMap(user => {
            if (user) {
                return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
            } else {
                return Observable.of(null);
            }
        })
    }

    googleLogin() {
        const provider = new firebase.auth.GoogleAuthProvider();
        return this.oAuthLogin(provider);
    }

    githubLogin() {
        const provider = new firebase.auth.GithubAuthProvider();
        return this.oAuthLogin(provider);
    }

    private oAuthLogin(provider) {
        return this.afAuth.auth.signInWithPopup(provider).then((credential) => {
            this.updateUserData(credential.user)
        }).catch((err) => {
            if (err.code === 'auth/account-exists-with-different-credential') {
                ...
            } else if (err.code === 'auth/internal-error') {
                ...
            } else {
                ...
            }
        })
    }

    private updateUserData(user) {
        const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);

        const data: User = {
            uid: user.uid,
            email: user.email,
            displayName: user.displayName,
            photoURL: user.photoURL
        }

        return userRef.set(data);
    }

    signOut() {
        ...
    }

    deleteUser() {
        ...
    }

}

其他信息：

@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
angular2-materialize: 15.1.10
angularfire2: 5.0.0-rc.3
core-js: 2.4.1
firebase: 4.6.1
font-awesome: 4.7.0
hammerjs: 2.0.8
jquery: 2.2.4
materialize-css: 0.100.2
rxjs: 5.4.2
zone.js: 0.8.14

如果我能获得所有属性也会很棒，会很方便。

任何想法，建议都会有很大的帮助。

Answer 1

我更喜欢使用Behavioursubject，这就是我目前的Auth.Service设置。

请注意，在用户注册时，我会将用户UID保存回firebase中的用户详细信息，因此当我提取所有用户数据时，它就拥有了我需要的一切。

我可以使用this.as.user.uid来获取具体细节。或任何其他。

      @Injectable()
      export class AuthService {

        private userSubject: BehaviorSubject<any> = new BehaviorSubject<any>(false);

        constructor(private afAuth: AngularFireAuth) {
          this.afAuth.authState
            .switchMap(user => user ? this.fb.user(user.uid).valueChanges() : Observable.of(false))
            .subscribe(userData => this.userSubject.next(userData));
        }

        get user() {
          return this.userSubject.value;
        }

        get loggedIn() {
          return !!this.userSubject.value;
        }

        userObservable() {
          return this.userSubject.asObservable();
        }

然后在我的其他组件中，我总是可以等待这样的用户数据。

 this.as.userObservable()
   .filter(res => res)
   .subscribe(res => this.user = res)

Answer 2

以下是我的Auth服务的副本。我有两个属性＆＃34; currentUserId（）＆＃34;和＆＃34; currentUserDisplayName（）＆＃34;。

  user: Observable<firebase.User>;
  private userDetails: firebase.User = null;

  constructor(private firebaseAuth: AngularFireAuth, private router: Router) {
     this.user = firebaseAuth.authState;
     this.user.subscribe((user) => {
        if (user) {
          this.userDetails = user;
        }
        else {
          this.userDetails = null;
        }
     });
  } 

    // Returns true if user is logged in
 get authenticated(): boolean {
  // consider changing to 'return this.userDetails != null'
    if (this.userDetails == null ) {
       return false;
    } else {
       return true;
    }
  }

  // Returns current user UID
  get currentUserId(): string {
     return this.authenticated ? this.userDetails.uid : '';
  }

  // Returns current user display name or Guest
  get currentUserDisplayName(): string {
      return this.userDetails.displayName || this.userDetails.email; 
  }

所以在组件中使用它只需注入你的authSvc和......

this.authSvc.currentUserId

通过服务从Firebase获取用户UID

2 个答案: