本文最初发布在Auth0.com博客上 ，并经许可在此处重新发布。

在这个由两部分组成的教程系列中，我们将学习如何构建一个使用Auth0身份验证保护Node后端和Angular前端安全的应用程序。 我们的服务器和应用程序还将使用自定义令牌对Firebase Cloud Firestore数据库进行身份验证，以便用户在使用Auth0登录后可以安全方式留下实时评论。 可以在angular-firebase GitHub存储库中找到Angular应用程序代码，在firebase-auth0-nodeserver存储库中找到Node API。

本教程的第一部分“ 使用Auth0验证Firebase和Angular：第1部分”介绍了：

• Auth0和Firebase的介绍和设置
• 实施一个安全的Node API，以生成自定义Firebase令牌并为我们的应用程序提供数据
• 具有模块和延迟加载的Angular应用程序体系结构
• 具有服务和路由保护的Auth0的角度身份验证
• 共享的Angular组件和API服务。

使用Auth0对Firebase和Angular进行身份验证：第2部分

本教程的第2部分将介绍：

1. 显示狗：异步和NgIfElse
2. 带有路由参数的狗详细信息
3. 注释模型类
4. Firebase Cloud Firestore和规则
5. 评论组件
6. 评论表格组件
7. 实时评论
8. 结论

我们完成的应用程序将如下所示：

让我们从使用Auth0：第1部分对Firebase和Angular进行身份验证的结尾处停下来的地方继续 。

显示狗：异步和NgIfElse

让我们实现应用程序的主页-狗列表。 设置Angular应用程序的体系结构时，我们为此组件创建了脚手架。

重要说明：确保您的Node.js API正在运行。 如果您需要有关API的更新知识，请参阅如何使用Auth0认证Firebase和Angular：第1部分-Node API 。

狗组件类

立即打开dogs.component.ts类文件并实现以下代码：

// src/app/dogs/dogs/dogs.component.ts
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ApiService } from '../../core/api.service';
import { Dog } from './../../core/dog';
import { Observable } from 'rxjs/Observable';
import { tap, catchError } from 'rxjs/operators';@Component({selector: 'app-dogs',templateUrl: './dogs.component.html'
})
export class DogsComponent implements OnInit {pageTitle = 'Popular Dogs';dogsList$: Observable;loading = true;error: boolean;constructor(private title: Title,private api: ApiService) {this.dogsList$ = api.getDogs$().pipe(tap(val => this._onNext(val)),catchError((err, caught) => this._onError(err, caught)));}ngOnInit() {this.title.setTitle(this.pageTitle);}private _onNext(val: Dog[]) {this.loading = false;}private _onError(err, caught): Observable {this.loading = false;this.error = true;return Observable.throw('An error occurred fetching dogs data.');}}

导入后，我们将设置一些本地属性：

• pageTitle ：设置页面的

  和