Angular + Firebase + TypeScript：添加身份验证和授权-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，安全问题是不可避免的。在使用 Firebase 作为后端服务时，我们可以通过 Firebase Authentication 来解决用户身份验证和授权问题。本文将介绍如何在 Angular 中集成 Firebase Authentication 以及如何使用 TypeScript 来实现更可靠的代码。

准备工作

在 Firebase 控制台中创建一个新项目，并开启 Authentication 和 Cloud Firestore。
在 Angular 项目中安装 Firebase 相关依赖：

npm install firebase @angular/fire --save

身份验证

首先，我们需要登录用户并获得身份验证令牌。使用 AngularFire 库，我们可以在 Angular 中轻松完成此操作。

首先，我们需要在 AppModule 中导入 AngularFireModule，并在 AngularFireModule 中配置 Firebase：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来，在 LoginComponent 中，我们可以使用 AngularFireAuth 来实现登录和注销功能：

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-login',
  template: `
    <div *ngIf="!user">
      <button (click)="login()">Login</button>
    </div>
    <div *ngIf="user">
      <p>Hello, {{user.email}}!</p>
      <button (click)="logout()">Logout</button>
    </div>
  `,
})
export class LoginComponent {
  user = null;

  constructor(public auth: AngularFireAuth) {
    auth.authState.subscribe(user => (this.user = user));
  }

  login() {
    this.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }

  logout() {
    this.auth.signOut();
  }
}

我们可以将 LoginComponent 显示为弹出窗口，以提供 Google 登录选项。当我们在 Angular 应用程序中进行身份验证时，Firebase 帮助我们管理令牌和刷新令牌。

授权

在已经登录的情况下，我们需要授权用户访问资源。Firebase 在 Cloud Firestore 中提供了安全规则，可以根据用户的权限控制访问。

我们可以通过 AngularFire 来查询数据，并使用一个 Observable 来跟踪更改。但是，在查询此数据时，需要确认用户已被授权执行该操作。

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-notes',
  template: `
    <div *ngIf="(notes | async)?.length; else noNotes">
      <div *ngFor="let note of notes | async" class="note">
        <h3>{{note.title}}</h3>
        <p>{{note.content}}</p>
      </div>
    </div>
    <ng-template #noNotes>No notes to display.</ng-template>
  `,
})
export class NotesComponent {
  notes: Observable<any[]>;

  constructor(private firestore: AngularFirestore, private auth: AngularFireAuth) {
    this.notes = this.auth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.firestore
            .collection('notes', ref => ref.where('ownerUid', '==', user.uid))
            .valueChanges({ idField: 'id' });
        } else {
          return [];
        }
      })
    );
  }
}

我们通过 authState Observable 获取用户，并使用该用户的 uid 来查询属于该用户的笔记。如果 user 为 null，则我们简单地返回一个空数组。

通过这种方式，我们可以确保只有授权用户才能访问他们自己的笔记。

TypeScript 的优势

TypeScript 是 JavaScript 的超集，它引入了静态类型和 OOP 概念。 TypeScript 为开发人员提供了许多好处：

类型安全：编译时能够检测出许多代码错误。
更好的可读性：代码注释可以与变量类型和参数等信息相结合。
更可靠的重构：使用 TypeScript，重构代码更加安全、可靠、准确。
更好的自动补全：编辑器可以更好地自动完成代码。

我们可以看到，TypeScript 对我们的代码会有积极影响。在使用 Angular 和 Firebase 构建现代 Web 应用程序时，使用 TypeScript 更是一种优势。

总结

本文介绍了如何在 Angular 应用程序中使用 Firebase Authentication 和 Firestore 实现身份验证和授权。我们还示范了使用 AngularFire 与 TypeScript 结合的示例代码，并便于他人学习和开展开发工作。基于这些内容，希望读者能够加强对 Angular + Firebase + TypeScript 的理解与应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b70601add4f0e0fffa177a