企业官网建设流程全解析

如何为 Angular-ShoppingCart 接入自己的 Firebase：认证、实时数据库与安全规则配置完整指南

【免费下载链接】Angular-ShoppingCartShoppingCart (Ecommerce) 🛒 Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n 🚀🔥👨‍💻项目地址: https://gitcode.com/gh_mirrors/an/Angular-ShoppingCart

Angular-ShoppingCart 是一款基于 Angular 10 + Firebase 的开源电商购物车应用，内置用户认证、实时数据库商品管理、PWA 与拖拽排序。这篇新手向指南将手把手带你为自己的项目接入 Firebase：从创建控制台项目、配置邮箱/密码与 Google 认证，到导入实时数据库商品数据、编写安全规则，最后跑通「注册 → 登录 → 浏览商品」的完整流程 🔥

这个应用用 Firebase 做了什么？

在动手之前，先搞清楚 Firebase 在这个购物车里的三个角色，配置时才不会抓瞎：

准备工作：克隆项目并安装依赖

先确保本机装好了 Node.js 和 Angular CLI，然后克隆仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/an/Angular-ShoppingCart cd Angular-ShoppingCart npm install

依赖安装完成后，稍后随时可以用ng serve启动开发服务器，浏览器打开http://localhost:4200/即可预览。

第一步：在 Firebase 控制台创建项目并获取配置

1. 打开 Firebase 控制台（console.firebase.google.com），点击创建项目，填入项目名并确认。
2. 在项目概览页点击</> 网页应用图标，给应用起个别名，完成注册。
3. 注册成功后，控制台会显示一段Web 应用配置信息，包含apiKey、authDomain、databaseURL、projectId、storageBucket、messagingSenderId六个字段。
4. 把这六个字段原样填入项目里的配置文件 src/environments/firebase.config.ts，替换掉尖括号占位符：

{ "apiKey": "YOUR_API_KEY", "authDomain": "YOUR_AUTH_DOMAIN", "databaseURL": "YOUR_DATABASE_URL", "projectId": "YOUR_PROJECT_ID", "storageBucket": "YOUR_STORAGE_BUCKETS", "messagingSenderId": "YOUR_MESSAGING_SENDER_ID" }

这份配置会在应用启动时被加载：src/app/shared/shared.module.ts#L35 中的AngularFireModule.initializeApp(FireBaseConfig)就是它的入口，同时引入了AngularFireAuthModule（认证）与AngularFireDatabaseModule（实时数据库）两个模块，所以你只需要改这一个文件，全局即可生效。

第二步：开启认证方式（邮箱/密码 + Google 登录）

购物车的登录页（src/app/views/base/index/login/login.component.ts）支持两种登录方式，需要在控制台分别手动开启：

• 邮箱/密码：进入Authentication → Sign-in method，打开Email/Password开关。对应 src/app/shared/services/auth.service.ts#L80-L90 中的createUserWithEmailAndPassword和signInRegular。
• Google 登录：在同一页面打开Google开关。启用时要求填写管理员邮箱；若弹窗登录报 provider 错误，请到Google 开发者控制台确认已把项目域名加入「已获授权的重定向 URI」。

关于clients节点与管理员权限 👨‍💻

用户注册成功后，src/app/shared/services/user.service.ts#L28-L36 的createUser会把邮箱、uid 等信息写入实时数据库的clients节点，并默认带上isAdmin: false。若想让某个账号拥有「新增/编辑/删除商品」的管理员能力，只需在控制台数据库里找到该用户，手动把isAdmin改为true—— 登录时 src/app/shared/services/auth.service.ts#L31-L33 的isAdmin$就会识别它，admin-gaurd.ts守卫随之放行管理页面。

第三步：创建实时数据库并导入商品数据

1. 在控制台左侧进入Realtime Database → 创建数据库，选择就近的地区，开发阶段可先选「已启用（测试模式）」。
2. 创建后，databaseURL会自动出现在项目设置中，回到上一步把配置文件里的databaseURL补全。
3. 把仓库根目录的商品数据 products.json 导入数据库的products节点：在实时数据库页面点击右上角导出 JSON旁的粘贴 JSON / 导入，粘贴文件内容后根节点选择products。

导入成功后，你的数据库结构应与下图一致（products节点下每条商品一个自动生成的 ID）：

每条商品的字段含义如下，导入自己的数据时请保持字段名一致：

前端读取入口在 src/app/shared/services/product.service.ts#L26-L29：this.db.list("products")订阅的就是这个节点，数据变更会自动推送到页面，无需轮询。

第四步：配置安全规则（先跑通，再加固）

开发调试阶段，建议在Database → Rules使用项目 README 中给出的宽松规则，确保本地能读写：

{ "rules": { ".read": true, ".write": true } }

⚠️上线前务必收紧。.write: true意味着任何人可改你的商品数据。生产环境推荐至少要求登录认证：

{ "rules": { ".read": "auth != null", ".write": "auth != null" } }

进一步可按节点细化，例如只有管理员（clients节点里auth.uid对应isAdmin为 true）才能写products：

{ "rules": { "clients": { ".read": "auth != null" }, "products": { ".read": true, ".write": "auth != null && /clients/$auth.uid/isAdmin == true" } } }

规则改动即时生效，改完可以直接刷新页面验证，无需重新构建。

跑起来验证：登录与商品列表全流程

ng serve

按以下清单逐项验证，全部通过说明你的 Firebase 接入成功 🚀

1. 首页正常加载商品横幅，说明实时数据库连通。
2. 弹窗注册一个邮箱账号，到控制台clients节点能看到新用户记录（isAdmin: false）。
3. 退出后重新登录，页面能正常恢复登录态（认证守卫 auth_gaurd.ts#L11-L20 放行）。
4. 把该用户isAdmin改为true重新登录，可以进入商品管理页新增商品，列表实时刷新。

新手最容易卡住的 5 个问题排查

至此，你已经完成了 Angular-ShoppingCart 的 Firebase 完整接入：认证、实时数据库与安全规则三大件全部就位。接下来可以顺着 src/app/shared/services/auth.service.ts 和 src/app/shared/services/product.service.ts 阅读源码，理解 AngularFire 的响应式订阅是如何驱动整个购物车界面实时更新的 🛒

【免费下载链接】Angular-ShoppingCartShoppingCart (Ecommerce) 🛒 Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n 🚀🔥👨‍💻项目地址: https://gitcode.com/gh_mirrors/an/Angular-ShoppingCart