angular - 您如何确定用户是否已在Angular Firebase中进行身份验证？(How do you determine if a user is already authenticated in Angular Firebase?)

Question

I am writing a guard to re-direct users to the login page if they are unauthenticated using AngularFireAuth.

(如果用户未使用AngularFireAuth进行身份验证，则我正在编写防护措施以将用户重定向到登录页面。)

Without this library, I would store a token in local/session storage and when the guard triggers, I would inspect the storage to see if a token exists.

(如果没有此库，我会将令牌存储在本地/会话存储中，并且当防护触发时，我将检查存储以查看令牌是否存在。)

AngularFireAuth stores a token in the database (which contains authentication information):

(AngularFireAuth将令牌存储在数据库中（其中包含身份验证信息）：)

However it would be unwise to directly inspect this as AngularFireAuth could change how this works at any future date.

(但是，直接进行检查是不明智的，因为AngularFireAuth可能会在将来的任何时间更改其工作方式。)

It is not exactly part of the documented public API.

(它不完全是已记录的公共API的一部分。)

In older versions of AngularFireAuth, I could include this method in my service to do this check:

(在较旧版本的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;
  }
}

However this does not persist on refresh.

(但是，刷新后这种情况不会持续。)

So while I am navigating around the system, it works fine, but if I refresh or leave and come back, I am prompted to log in again.

(因此，当我在系统中导航时，它可以正常工作，但是如果刷新或离开然后再返回，系统将提示我再次登录。)

How can I write my isLoggedIn method to be callable in my guard?

(如何编写可以在守护程序中调用的isLoggedIn方法？)

  ask by nephiw translate from so

Answer 1

I recommend using AngulaFireAuthGuard.

(我建议使用AngulaFireAuthGuard。)

Without adding any special method, it handles everything for you.

(无需添加任何特殊方法，它即可为您处理所有事情。)

So, instead of using a regular guard, inside your app-routing.module you can directly add it.

(因此，您可以在应用程序路由模块内部直接添加它，而不必使用常规的防护措施。)

This is an example:

(这是一个例子：)

into app.module:

(进入app.module：)

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

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

and into app-routing.module:

(并进入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 } },
];

You can look at the details from here: https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md

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