Ionic中从Firebase获取并显示当前登录用户数据的实现需求

没问题，我来帮你搞定这个需求！首先假设你已经在user.ts里注入了AngularFireAuth和AngularFireDatabase（和你写createProfile()时的依赖一致），并且已经定义了Profile接口。

第一步：在user.ts中定义变量并实现showdata() #

首先在组件类里添加存储用户信息的变量，然后编写showdata()函数：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase } from '@angular/fire/database';
import { Subscription } from 'rxjs';
import { Profile } from './path-to-your-profile-interface'; // 替换成你的Profile接口路径

@Component({
  selector: 'app-user',
  templateUrl: './user.page.html',
  styleUrls: ['./user.page.scss'],
})
export class UserPage implements OnInit, OnDestroy {
  profile: Profile;
  private profileSubscription: Subscription;

  constructor(
    private afAuth: AngularFireAuth,
    private afDatabase: AngularFireDatabase
  ) { }

  ngOnInit() {
    // 页面初始化时自动加载用户数据
    this.showdata();
  }

  showdata() {
    this.afAuth.authState.subscribe(auth => {
      if (auth) {
        // 用户已登录，从数据库拉取对应profile数据
        this.profileSubscription = this.afDatabase.object<Profile>(`profile/${auth.uid}`)
          .valueChanges()
          .subscribe(
            profileData => {
              this.profile = profileData;
              console.log('用户信息加载完成:', this.profile);
            },
            error => {
              console.error('加载用户信息失败:', error);
            }
          );
      } else {
        console.log('当前没有用户登录');
        // 这里可以添加未登录的处理逻辑，比如跳转到登录页
        // this.navCtrl.setRoot(LoginPage);
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.profileSubscription) {
      this.profileSubscription.unsubscribe();
    }
  }
}

第二步：在模板中展示数据 #

在对应的user.html里，你可以通过插值表达式把数据渲染出来：

<ion-content>
  <!-- 用户信息展示区域 -->
  <div *ngIf="profile" class="user-info">
    <h2>用户信息</h2>
    <p><strong>用户名:</strong> {{ profile.username }}</p>
    <p><strong>名字:</strong> {{ profile.firstName }}</p>
    <p><strong>姓氏:</strong> {{ profile.lastName }}</p>
  </div>

  <!-- 加载状态提示 -->
  <div *ngIf="!profile" class="loading">
    <p>加载用户信息中...</p>
  </div>

  <!-- 未登录提示 -->
  <div *ngIf="!(afAuth.authState | async)" class="not-logged-in">
    <p>请先登录查看用户信息</p>
  </div>
</ion-content>

关键注意事项 #

1. 数据库权限：确保你的Firebase数据库规则允许登录用户读取自己的profile数据，示例规则如下：

{
  "rules": {
    "profile": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

2. 内存泄漏防范：一定要在组件销毁时取消订阅valueChanges()返回的Observable，我在代码里已经通过ngOnDestroy实现了这一点。
3. Profile接口一致性：确保你的Profile接口包含username、firstName、lastName这些字段，和你创建profile时的结构完全匹配。

内容的提问来源于stack exchange，提问作者Jakub Balicki