как бороться с временем отклика для состояния авторизации firebase

Question

Я пытаюсь свести к минимуму время, необходимое для того, чтобы мое веб-приложение успешно проверило, аутентифицирована ли его firebase, но мой «объект состояния аутентификации», похоже, не работает правильно на моем шаблоне (соответствующие разделы на шаблоне не появляются вообще)

Мое целевое решение состояло бы в том, чтобы сохранить состояние аутентификации в локальном хранилище, поэтому, если кто-то снова откроет веб-приложение, не будет прерывистой загрузки для раздела аутентификации пользователя на странице. Может кто-нибудь помочь или склонить меня к другому / лучшему решению?

Мой компонент приложения содержит ниже в своем конструкторе:

  this.authService.authListener();

header.component.ts - где я хочу отслеживать моего пользователя Auth

export class HeaderComponent implements OnInit {

  authObj: Observable<any>;
  constructor(public sideNavService: SideNavService, private accountService: AccountService, private authService: AuthenticationService) { 
  }

  ngOnInit(): void {
    this.authObj = this.authService.getAuthState();
  }
}

header.component. html

  <div *ngIf="authObj | async as authObj">
            <div *ngIf="!authObj.authenticated" class="header-ctas" fxHide.lt-md>
                <button mat-button [routerLink]="['/account/create']" class="btn-register">Register</button>
                <button mat-button [routerLink]="['/account/login']" class="btn-login">Account Login</button>
                <mat-icon routerLink="['/']">shopping_cart</mat-icon>
            </div>
            <div *ngIf="authObj.authenticated" class="header-ctas" fxHide.lt-md>
                <button mat-button (click)="accountService?.logout()" class="btn-register">Logout</button>
                <mat-icon routerLink="['/']">shopping_cart</mat-icon>
            </div>
        </div>

Мой сервис аутентификации имеет следующее:

   public authListener() {
    let userAuthObj = JSON.parse(localStorage.getItem('userAuth'));
    if (userAuthObj && userAuthObj.authenticated) {
        this.authenticationState.next(userAuthObj);
    } else {
        this.fireAuth.authState.subscribe(user => {
            localStorage.setItem('userAuth', JSON.stringify({ user: user ? user : null, authenticated: user ? true : false }));
            this.authenticationState.next(JSON.parse(localStorage.getItem('userAuth')));
        });
    }
}

  public getAuthState() {
        return this.authenticationState.asObservable();
    }

Answer 1

ngOnInit () - это ловушка жизненного цикла, и ее не следует использовать для асинхронных вызовов c (передовой опыт). Вместо этого переместите проверочный код в распознаватель.

auth.resolver.ts

@Injectable({ providedIn: 'root' })
export class AuthResolver implements Resolve<any> {
  constructor(private authservice: AuthService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<any>
  {
    return this.authService.getAuthState();
  }
}

app.routing.ts

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '/',
        component: HeaderComponent,
        resolve: {
          authState: AuthResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})

добавьте преобразователь в свой ngModule под провайдерами:

 providers: [AuthResolver] //Add AuthResolver to the providers array

header.component.ts

export class HeaderComponent implements OnInit {

  authObj: any;
  constructor(public sideNavService: SideNavService, private accountService: AccountService, private activatedRoute: ActivatedRoute) { 
  }

  ngOnInit(): void {
    this.authState = this.route.snapshot.data['authState'].authenticated;
  }
}

Для получения дополнительной информации ознакомьтесь с официальной документацией здесь .