您如何确定用户是否已在 Angular Firebase 中通过身份验证？

Question

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

然而，直接检查它是不明智的，因为 AngularFireAuth 可能会在未来的任何时候改变它的工作方式。它不完全是文档 public 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

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

因此，您可以在您的应用程序中直接添加它，而不是使用常规保护。

这是一个例子：

进入app.module:

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

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

并进入应用程序-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

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

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 } },
];

对我有用，谢谢

您如何确定用户是否已在 Angular Firebase 中通过身份验证？

How do you determine if a user is already authenticated in Angular Firebase?

firebase

firebase-authentication

angularfire2

angular