您如何确定用户是否已经在 Angular Firebase 中进行了身份验证？

Question

如果用户未使用 AngularFireAuth 进行身份验证，我正在编写一个保护程序以将用户重定向到登录页面。如果没有这个库，我会将令牌存储在本地/会话存储中，当警卫触发时，我会检查存储以查看是否存在令牌。 AngularFireAuth 在数据库中存储一个令牌（其中包含身份验证信息）：

但是直接检查它是不明智的，因为 AngularFireAuth 可能会在未来的任何日期改变它的工作方式。它不完全是记录在案的公共 API 的一部分。

在旧版本的 AngularFireAuth 中，我可以在我的服务中包含此方法来执行此检查：

import { AngularFireAuth } from '@angular/fire/auth';

export class AuthService {
  constructor(private readonly service: AngularFireAuth) {}

  public login(credentials: Credentials) {
    const { email, password } = credentials;
    return this.service.auth.signInWithEmailAndPassword(email, password);
  }

  public isLoggedIn(): boolean {
    return !!this.service.auth.currentUser;
  }
}

但是，这不会在刷新时持续存在。因此，当我在系统中导航时，它工作正常，但如果我刷新或离开并返回，系统会提示我再次登录。

如何编写我的 isLoggedIn 方法以便在我的守卫中调用？

Answer 1

import { AngularFireAuthGuard, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';

const redirectUnauthorizedToHome = () => redirectUnauthorizedTo(['home']);
const redirectLoggedInToAccount = () => redirectLoggedInTo(['my-account']);

const routes: Routes = [
  { path: 'my-account', component: MyAccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToHome } },
  { path: 'create-account', component: CreateAccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToAccount } },
];

为我工作，tks

Answer 2

所以我需要能够确定用户是否在我的保护之外登录，所以这是我的解决方案：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable()
export class AuthService {
  constructor(
    private readonly service: AngularFireAuth
  ) {}

  public login(credentials: Credentials): Promise<any> {
    const { email, password } = credentials;
    return this.service.auth.signInWithEmailAndPassword(email, password);
  }

  public isLoggedIn(): Promise<boolean> {
    return new Promise((resolve: any) => {
      this.service.auth.onAuthStateChanged(( user: any ) => {
        user ? resolve(true) : resolve(false);
      });
    });
  }
}

Answer 3

我推荐使用 AngulaFireAuthGuard。无需添加任何特殊方法，它会为您处理一切。

因此，您可以直接在 app-routing.module 中添加它，而不是使用常规保护。

这是一个例子：

进入app.module：

import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard'; 

@NgModule({
   declarations: [],
   imports: [
      AngularFireAuthGuardModule,
   ],
   providers: [],
   bootstrap: []
})

进入 app-routing.module:

import { AngularFireAuthGuard, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';

const redirectUnauthorizedToHome = () => redirectUnauthorizedTo(['home']);
const redirectLoggedInToAccount = () => redirectLoggedInTo(['my-account']);

const routes: Routes = [
  { path: 'my-account', component: MyAccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToHome } },
  { path: 'create-account', component: CreateAccountComponent, canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToAccount } },
];

您可以从这里查看详细信息： https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md