【问题标题】:AngularFire2: Access User ProfileAngularFire2:访问用户配置文件
【发布时间】:2017-04-25 21:25:37
【问题描述】:

我在兜圈子,希望有人能指出我正确的方向。

业务问题 我有一个 AngularFire2 应用程序,我想执行以下步骤:

  1. 用户在 Firebase 中注册为用户
  2. 然后,用户填写一份注册表,其中包含其他信息(他们工作的客户或组织)。然后他们点击保存
  3. 新客户已创建
  4. 使用在步骤 3 中创建的客户的客户密钥创建用户配置文件
    1. 用户被重定向到客户列表页面,它只显示登录用户个人资料中具有客户 ID 的任何客户

我已经完成了所有步骤,但我似乎无法解决的是如何在触发获取客户服务中的所有客户的呼叫之前获取用户个人资料信息。

理想情况下,我想做的是将用户服务注入客户服务,以识别当前用户是谁以及他们的客户 ID 是什么,因此我可以将其作为参数传递给获取所有客户函数。

我可以轻松调用 AuthService 并订阅 firebase authstate 上的 uid,但我不知道如何从那里查找用户配置文件。

代码

AuthService

    import { Injectable } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, FirebaseAuthState, FirebaseListObservable } from 'angularfire2';
import { Observable } from 'rxjs/Rx';
import { Router } from '@angular/router';

import { UserModel } from '../../user/models/user.model';

@Injectable()
export class AuthService {

  user: UserModel;
  userProfile: any;
  userId: string;
  usersRef: string = '/users/';

  constructor(private af: AngularFire, private router: Router) {

    this.af.auth.subscribe(authState => {
      this.user = authState;
      console.log('authService Constructor: ', this.user)
    });
  }

  register(email?: string, password?: string) {
    this.af.auth.createUser({ email, password })
      .then(response => this.router.navigate(['/user/add/']))
      .catch(error => console.log(error));
  }

  isAuth(): UserModel {
    return this.user;
  }
}

用户服务

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';

import { AuthService } from '../../auth/services/auth.service';
import { FirebaseService } from '../../core/services/firebase.service';
import { CustomerService } from '../../customer/services/customer.service';

import { UserModel } from '../models/user.model';
import { CustomerModel } from '../../customer/models/customer.model';

@Injectable()
export class UserService {
  usersRef: string = '/users/';
  user: UserModel;
  customer: CustomerModel = new CustomerModel(null, null, null, null, null, null, null, null);
  customerKey: string;
  userId: string;

  constructor(
    private af: AngularFire,
    private authService: AuthService,
    private customerService: CustomerService,
    private firebaseService: FirebaseService,
    private router: Router) {


  }

  getAllUsers(): FirebaseListObservable<UserModel[]> {
    return this.af.database.list(this.usersRef);
  }

  getUser(){
    return this.af.database.list(this.usersRef, {
      query: {
        orderByKey: true,
        equalTo: this.userId
      }
    })
  }

  addUser(user: any) {

    this.createNewCustomer(user.organisation);

    this.createUser(user);

    this.saveUser();

  }

  createUser(user: UserModel) {
    this.user = user;
    this.user.createdDate = user.createdDate = Date.now();
    this.user.customerId = this.customerKey;
  }

  saveUser() {
    this.af.database.list(this.usersRef).push(this.user)
      .then(response => {
        this.redirectToCustomerList();
      });
  }

  createNewCustomer(organisation: string) {
    this.customerKey = this.firebaseService.createUniqueKey('customers');
    this.customer.organisation = organisation;
    this.customerService.addCustomer(this.customer, this.customerKey);
  }

  redirectToCustomerList() {

    this.router.navigate(['/customer/list']);
  }

}

客户服务

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

import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';

import { CustomerModel } from '../models/customer.model';

@Injectable()
export class CustomerService {

  customersRef: string = '/customers/';
  customer: CustomerModel;
  userId: string;

  constructor(private af: AngularFire) {

  }

  getAllCustomers(): FirebaseListObservable<CustomerModel[]> {

    return this.af.database.list(this.customersRef, {
      query: {
        orderByKey: true,
        equalTo: this.userId
      }
    })
  }

  getCustomer(id: string): FirebaseObjectObservable<any> {
    return this.af.database.object(this.customersRef + id);
  }

  addCustomer(customer: CustomerModel, customerKey?: string): any {
    customer.createdDate = Date.now();
    if (customerKey) {
      this.af.database.object(this.customersRef + customerKey).set(customer);
    } else {
      this.af.database.list(this.customersRef).push(customer);
    }
    return customerKey;
  }

  updateCustomer(customerIndex: string, customer: CustomerModel) {
    this.af.database.object(this.customersRef).update(customer);
  }


}

【问题讨论】:

    标签: angular angularfire2


    【解决方案1】:

    这样的?

    customerForCurrentUser$ = this.af.auth
      .map(user => user.$key)
      .switchMap(key => this.customerService.getCustomer(key))
    

    【讨论】:

    • 我只是收到一个错误说 switchMap is not a function TypeError: this.af.auth.map(...).switchMap is not a function
    • 你可能忘了导入它 - import 'rxjs/add/operator/switchMap'
    • 正确:-)。我不熟悉开关图,然后我如何从中提取实际的客户密钥。我收到了一个匿名主题
    • customerForCurrentUser$ 是一个冷的 observable,订阅它,可以在代码中使用 subscribe(),或者在模板中使用 async 管道
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-28
    • 2018-06-06
    • 1970-01-01
    • 2015-09-18
    • 1970-01-01
    相关资源
    最近更新 更多