SuperAPI AI 工具集

angularfire

前端与建站

查看项目

更新于 10-15 07:52

技能介绍

用途

AngularFire 是 Firebase 官方的 Angular 集成库。本技能用于指导在 Angular 应用中接入并使用 Firebase 服务,覆盖身份认证、Cloud Firestore 实时数据库、Cloud Storage、Cloud Functions 与 Analytics 等模块。当需要搭建 Angular 应用中的 Firebase 集成、实现登录流程、操作 Firestore、上传文件、调用云函数、管理离线持久化、配置安全规则,或把 Firebase 与 NgRx Signals 状态库结合时,可启用本技能。

主要能力

  • 服务提供:通过 provideFirebaseApp() + initializeApp() 在 app.config.ts 中注册应用,并用 provideAuth(() => getAuth())、provideFirestore(() => getFirestore())、provideStorage(() => getStorage())、provideFunctions(() => getFunctions())、provideAnalytics(() => getAnalytics()) 等模块化 API 接入各服务。
  • 身份认证:使用 inject(Auth) 获取服务,用 user(auth) 得到用户 Observable,并通过 toSignal() 转换为 Signal(要求提供 initialValue: null),在 NgRx Signals store 中管理认证状态。
  • Firestore:使用 inject(Firestore),把 collectionData()、docData() 等 Observable 转换为 Signal,配合 where()、orderBy()、limit() 等查询约束进行过滤读取;写入前校验用户输入,避免无约束地拉取整集合。
  • 云存储:使用 inject(Storage),上传前校验文件大小与类型,定义 storage.rules 安全规则,处理上传错误并向用户反馈。
  • 云函数:使用 inject(Functions) 与 httpsCallable() 并配合 TypeScript 类型、超时配置和显式错误处理。
  • 错误处理:区分并处理 auth/、storage/、functions/* 等具体错误码,返回对用户友好的提示,不暴露内部细节,也不静默吞掉错误。
  • 仓库模式:把 Firebase 操作封装在仓库层(infrastructure),在仓库层把 Firestore 文档转换为领域实体,不向领域层暴露 Firestore 类型,不在组件或应用层直接进行 Firebase 操作。
  • 安全规则:在 Firestore 规则中校验 request.auth != null,并实现按用户隔离的访问控制(如 resource.data.userId == request.auth.uid);在 Firebase 模拟器中测试后再部署。

使用方式

前置条件包括:Angular 20+ 且使用独立组件的项目、Firebase 项目、AngularFire v20+、@ngrx/signals。安装命令:

安装 AngularFire 与 Firebase SDK

pnpm install @angular/fire firebase

或使用 Angular CLI

ng add @angular/fire

Firebase 配置需放入环境文件(如 src/environments/environment.ts),不得把 API key 或密钥硬编码进版本库。随后在 app.config.ts 中通过 providers 注册各项服务。文档给出了认证服务、认证 Store、Firestore 仓库、Firestore Store 集成、存储服务、云函数服务的示例代码,以及 Firestore 与 Storage 安全规则示例。离线持久化可通过 enableIndexedDbPersistence(firestore) 开启。

适用场景

适用于在 Angular 项目中搭建 Firebase、实现邮箱密码或 OAuth 登录、操作 Firestore 实时数据、上传文件到 Firebase Storage、调用 Cloud Functions、管理离线持久化、配置安全规则,以及将 Firebase 与 NgRx Signals store 集成等场景。

限制

该技能要求使用模块化 API,不得使用兼容层 API(@angular/fire/compat/*)。生产环境不得使用 allow read, write: if true。未提供关于收费、定价或具体平台支持的更多信息,暂未提供。