Minimus云存储揭秘：Firestore天气应用按用户隔离城市列表的完整教程

Minimus云存储揭秘Firestore天气应用按用户隔离城市列表的完整教程【免费下载链接】minimus️ A fully featured production ready Angular weather app (tutorial)项目地址: https://gitcode.com/gh_mirrors/mi/minimusMinimus 是一款功能完整、可直接上生产的 Angular 天气应用weather app它的核心玩法是关注你关心的城市——而这份城市列表并不存在浏览器本地而是存放在云端 Firestore 数据库中按用户uid隔离存储登录任何设备都能同步。这篇文章将带你快速看懂它的设计思路与实现细节新手也能轻松上手。 什么是 Minimus 天气应用Minimus 用 Angular 搭建了一个完整的生产级天气应用包含这几大能力能力说明天气查询接入天气 API展示城市温度与状态城市关注从各国首都列表中挑选城市并添加到个人列表用户体系Firebase Auth 提供注册 / 登录会话状态由前端守卫保护云端存储Firestore 按用户隔离保存城市列表跨设备同步PWA 支持Service Worker 注册支持离线与安装模块组织清晰与云存储直接相关的目录如下数据服务src/app/services/fb/fb.service.ts城市列表页src/app/pages/home/home.component.ts添加城市页src/app/pages/add/add.component.ts路由与守卫src/app/app-routing.module.ts、src/app/guards/app.guard.ts 整体架构城市列表数据流全景一次关注城市操作的完整数据流非常简单注册 / 登录登录组件 和 注册组件 调用FbService的signin/signup背后是 Firebase 认证登录成功跳转首页HomeComponent在ngOnInit中调用fb.getCities()用async管道把订阅到的城市渲染成一张张天气卡片添加城市AddComponent调用fb.addCity()把{name, added}写入 Firestore云端落地所有读写都发生在FbService内部页面组件完全不感知存储细节——服务层是唯一接触 Firestore 的地方这是它值得学习的架构习惯。Firestore 按用户隔离存储城市列表️ 设计核心用 uid 作为文档路径实现按用户隔离这是全文最关键的一点。Firestore 采用集合 - 文档的分层结构Minimus 的做法是把用户的 uid 直接当作顶层文档路径每个用户天然拥有一个独立的数据空间Firestore └── {uid: aB3x...} ← 用户A 的专属文档路径即 uid ├── Rome → { name: Rome, added: 2026-08-23... } └── Tokyo → { name: Tokyo, added: 2026-08-23... } └── {uid: Kd9y...} ← 用户B 的专属文档与A完全隔离 └── Paris → { name: Paris, added: ... }为什么这样设计好零配置的权限隔离不用手工建users集合再嵌套子集合路径本身就是租户边界用户 A 的查询永远只落在自己的文档里读写路径最短读取整份列表是一次read(uid)写入一座城市是一次write(uid/name)各只需一条路径天然覆盖更新城市名作为子键再次写入时直接覆盖天然支持取消关注再重新关注。在 fb.service.ts 中核心实现只有两个方法getCities() { return this.auth.uid().pipe(switchMap((uid) { return this.fs.read(${uid}); })); } addCity(name: string) { return this.auth.uid().pipe(switchMap((uid) { return this.fs.write(${uid}/${name}, {name, added: new Date()}) .pipe(first()); }), first()); }配合响应式操作符两行思路就能说清auth.uid()是一个流登录状态就绪后才发出 uid未登录时根本不会发起任何读请求switchMap把拿到 uid无缝衔接成按 uid 读 / 写形成认证 → 存储的自动流水线first()让写操作在拿到首次结果后即完成订阅避免多余往返。 路由守卫云存储的双重门卫再好的隔离也需要前端兜底。Minimus 用两个极简守卫在路由层完成谁能进哪扇门见 app-routing.module.ts页面守卫行为首页 / 详情 / 添加AppGuard未登录 → 强制跳/login登录 / 注册AuthGuard已登录 → 踢回首页避免重复登录两个守卫都只依赖FbService.isAuth()这一个方法逻辑清晰云数据区需要门票门票区不欢迎已有门票的人。这对新手是很好的守卫设计范本——守卫只做判断与跳转不做业务。⚙️ 配置指南Firebase 密钥放在哪里项目没有把密钥写死在组件里而是遵循 Angular 的环境文件约定开发环境src/environments/environment.ts 中预留了apiKey、authDomain、projectId等字段占位生产环境src/environments/environment.prod.ts 由构建时的fileReplacements自动替换。应用启动时在 app.module.ts 中通过AngularFireLite.forRoot(environment.config)一次性完成 Firebase 初始化——认证与 Firestore 客户端AngularFireLiteAuth、AngularFireLiteFirestore由此注入到FbService中。 小贴士仓库里的环境文件默认是空占位符动手前请填入你自己 Firebase 项目的配置这是教程型仓库的常见做法。✅ 新手可复用的设计清单从 Minimus 的 Firestore 城市列表设计中可以带走这几条经验按 uid 建文档路径——用登录态天然完成多租户隔离不依赖复杂权限规则起步服务层收敛存储细节——组件只调业务方法getCities/addCity不直接碰数据库认证流驱动数据流——uid()switchMap让登录后才读数据成为代码结构本身而非运行时 if 判断路由守卫分层——AppGuard保护数据页AuthGuard反制已登录用户两个小文件覆盖全站安全环境文件管理密钥——开发与生产配置分离密钥不进组件代码。 快速上手动手跑一遍如果你已经配置好 Angular CLI可以克隆仓库并填入 Firebase 配置后启动git clone https://gitcode.com/gh_mirrors/mi/minimus cd minimus npm install npm start打开首页注册一个账号再添加一座城市然后换一个浏览器重新登录——你会看到同一份城市列表出现在两个环境里。那一刻你就真正理解了Firestore 按用户隔离存储的完整闭环。【免费下载链接】minimus️ A fully featured production ready Angular weather app (tutorial)项目地址: https://gitcode.com/gh_mirrors/mi/minimus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考