如何为 Angular-ShoppingCart 接入自己的 Firebase认证、实时数据库与安全规则配置完整指南【免费下载链接】Angular-ShoppingCartShoppingCart (Ecommerce) Application using Angular10, Firebase, PWA, DragDrop, Materialized Bootstrap and i18n 项目地址: https://gitcode.com/gh_mirrors/an/Angular-ShoppingCartAngular-ShoppingCart 是一款基于 Angular 10 Firebase 的开源电商购物车应用内置用户认证、实时数据库商品管理、PWA 与拖拽排序。这篇新手向指南将手把手带你为自己的项目接入 Firebase从创建控制台项目、配置邮箱/密码与 Google 认证到导入实时数据库商品数据、编写安全规则最后跑通「注册 → 登录 → 浏览商品」的完整流程 这个应用用 Firebase 做了什么在动手之前先搞清楚 Firebase 在这个购物车里的三个角色配置时才不会抓瞎应用功能依赖的 Firebase 组件对应源码位置用户注册 / 登录邮箱密码、Google 弹窗Firebase Authenticationsrc/app/shared/services/auth.service.ts商品列表、管理员增删改查Realtime Databaseproducts节点src/app/shared/services/product.service.ts用户档案、管理员标记Realtime Databaseclients节点src/app/shared/services/user.service.ts页面访问拦截认证守卫 管理员守卫src/app/shared/guards/auth_gaurd.ts、src/app/shared/guards/admin-gaurd.ts准备工作克隆项目并安装依赖先确保本机装好了 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 控制台创建项目并获取配置打开 Firebase 控制台console.firebase.google.com点击创建项目填入项目名并确认。在项目概览页点击/ 网页应用图标给应用起个别名完成注册。注册成功后控制台会显示一段Web 应用配置信息包含apiKey、authDomain、databaseURL、projectId、storageBucket、messagingSenderId六个字段。把这六个字段原样填入项目里的配置文件 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守卫随之放行管理页面。第三步创建实时数据库并导入商品数据在控制台左侧进入Realtime Database → 创建数据库选择就近的地区开发阶段可先选「已启用测试模式」。创建后databaseURL会自动出现在项目设置中回到上一步把配置文件里的databaseURL补全。把仓库根目录的商品数据 products.json 导入数据库的products节点在实时数据库页面点击右上角导出 JSON旁的粘贴 JSON / 导入粘贴文件内容后根节点选择products。导入成功后你的数据库结构应与下图一致products节点下每条商品一个自动生成的 ID每条商品的字段含义如下导入自己的数据时请保持字段名一致字段含义productName/productPrice商品名称 / 价格productCategory/productSeller分类 / 品牌品牌筛选管道 filterByBrand.pipe.ts 依赖它productQuatity库存数量注意源码中此字段拼写如此请原样保留productImageUrl/ratings商品图片 URL / 评分前端读取入口在 src/app/shared/services/product.service.ts#L26-L29this.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 接入成功 首页正常加载商品横幅说明实时数据库连通。弹窗注册一个邮箱账号到控制台clients节点能看到新用户记录isAdmin: false。退出后重新登录页面能正常恢复登录态认证守卫 auth_gaurd.ts#L11-L20 放行。把该用户isAdmin改为true重新登录可以进入商品管理页新增商品列表实时刷新。新手最容易卡住的 5 个问题排查现象常见原因解决办法首页空白、控制台报 Firebase 错误配置六个字段抄错、多空格或databaseURL为空对照控制台重新复制确认已创建实时数据库Google 登录弹窗报错未开启 Google 方式或未添加授权域名控制台开启 Sign-in method到 Google 开发者后台补授权 URI注册成功但没有登录态邮箱/密码方式未开启开启 Email/Password 并保存商品页提示未找到商品products节点为空或导入到了错误层级检查节点名必须是products且与 JSON 根节点对齐部署后突然 401 / 无权限规则被收紧但前端未登录规则改为auth ! null前先确保登录流程可用至此你已经完成了 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, DragDrop, Materialized Bootstrap and i18n 项目地址: https://gitcode.com/gh_mirrors/an/Angular-ShoppingCart创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考