Post by account_disabled on Jan 25, 2024 4:12:57 GMT
本文最初发表于 博客，经许可在此转载。 在这个由两部分组成的教程系列中，我们将学习如何构建一个应用程序，通过Auth0身份验证来保护 Node 后端和 Angular 前端。我们的服务器和应用程序还将使用自定义令牌对Firebase Cloud Firestore 数据库进行身份验证，以便用户在使用 Auth0 登录后可以安全地留下实时评论。Angular 应用程序代码可以在angular-firebase GitHub 存储库中找到，节点 API 可以在firebase-auth0-nodeserver 存储库中找到。 我们教程的第一部分使用 Auth0 对 Firebase 和 Angular 进行身份验证：第 1 部分，涵盖： Auth0 和 Firebase 的介绍和设置 实现一个安全的 Node API，该 API 可以创建自定义 Firebase 令牌并为我们的应用程序提供数据 具有模块和延迟加载的 Angular 应用程序架构 使用带有服务和路由保护的 Auth0 进享 Angular 组件和 API 服务。
使用 Auth0 验证 Firebase 和 Angular：第 2 部分 我们教程的第 2 部分将涵盖： Learn to Code with JavaScript 显示狗：Async 和 NgIfElse 带有路线参数的狗详细信息 评论模型类 Firebase Cloud Firestore 和规则 评论组件 评论表单组件 实时 WhatsApp 号码数据 评论 结论 我们完成的应用程序将如下所示： 带有 Auth0 自定义令牌的 Angular Firebase 应用 让我们从《使用 Auth0 验证 Firebase 和 Angular：第 1 部分》结尾处继续。 显示狗：Async 和 NgIfElse 让我们实现应用程序的主页 - 狗列表。当我们设置 Angular 应用程序的架构时，我们为该组件创建了脚手架。 重要提示：确保您的 Node.js API 正在运行。如果您需要复习 API，请参阅如何使用 Auth0 对 Firebase 和 Angular 进行身份验证：第 1 部分 – 节点 API。 狗组件类 现在打开类设置我 请求返回的可观察值，用于获取狗列表数据 loading：在发出 API 请求时显示加载图标 error：如果从 API 获取数据出现问题，则显示错误。
我们将使用声明式异步管道来响应dogsList$APIGET请求返回的可观察值。使用异步管道，我们不需要在DogsComponent类中订阅或取消订阅：订阅过程将自动管理！我们只需要设置我们的可观察对象。 我们将通过将它们传递给构造函数来使Title和ApiService可供我们的类使用，然后设置我们的dogsList$可观察对象。我们将使用 RxJS 运算符tap（以前称为do运算符）并catchError调用处理函数。该tap运算符会执行副作用，但不会影响发出的数据，因此它非常适合设置其他属性。该_onNext()函数将设置loading为false（因为数据已成功发出）。该_onError()函数将适当地设置loading并error抛出错误。如前所述，我们不需要订阅或取消订阅可dogsList$观察对象，因为异步管道（我们将在模板中添加）将为我们处理该问题。 在组件初始化时，我们将使用ngOnInit()OnInit 生命周期挂钩来监视以设置文档。
使用 Auth0 验证 Firebase 和 Angular：第 2 部分 我们教程的第 2 部分将涵盖： Learn to Code with JavaScript 显示狗：Async 和 NgIfElse 带有路线参数的狗详细信息 评论模型类 Firebase Cloud Firestore 和规则 评论组件 评论表单组件 实时 WhatsApp 号码数据 评论 结论 我们完成的应用程序将如下所示： 带有 Auth0 自定义令牌的 Angular Firebase 应用 让我们从《使用 Auth0 验证 Firebase 和 Angular：第 1 部分》结尾处继续。 显示狗：Async 和 NgIfElse 让我们实现应用程序的主页 - 狗列表。当我们设置 Angular 应用程序的架构时，我们为该组件创建了脚手架。 重要提示：确保您的 Node.js API 正在运行。如果您需要复习 API，请参阅如何使用 Auth0 对 Firebase 和 Angular 进行身份验证：第 1 部分 – 节点 API。 狗组件类 现在打开类设置我 请求返回的可观察值，用于获取狗列表数据 loading：在发出 API 请求时显示加载图标 error：如果从 API 获取数据出现问题，则显示错误。
我们将使用声明式异步管道来响应dogsList$APIGET请求返回的可观察值。使用异步管道，我们不需要在DogsComponent类中订阅或取消订阅：订阅过程将自动管理！我们只需要设置我们的可观察对象。 我们将通过将它们传递给构造函数来使Title和ApiService可供我们的类使用，然后设置我们的dogsList$可观察对象。我们将使用 RxJS 运算符tap（以前称为do运算符）并catchError调用处理函数。该tap运算符会执行副作用，但不会影响发出的数据，因此它非常适合设置其他属性。该_onNext()函数将设置loading为false（因为数据已成功发出）。该_onError()函数将适当地设置loading并error抛出错误。如前所述，我们不需要订阅或取消订阅可dogsList$观察对象，因为异步管道（我们将在模板中添加）将为我们处理该问题。 在组件初始化时，我们将使用ngOnInit()OnInit 生命周期挂钩来监视以设置文档。