Угловое 7-компонентное перенаправление без маршрутизации

Question

С моими текущими настройками Angular 7 и Firebase у меня следующая ситуация:

У меня есть основной компонент приложения, который показывает зону пользователя, если пользователь вошел в систему или иным образом публичную область.Все работает нормально, но есть задержка 1-2 секунды, пока правильный компонент не отобразится после выхода или входа. Кстати, я не хочу использовать маршрутизацию.потому что я хочу показать все с одним и тем же URL.

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

app.component.html

<div *ngIf="authService.isAuthorized(); else showLogin">
  <app-member></app-member>
</div>
<ng-template #showLogin>
  <app-public></app-public>
</ng-template>
<router-outlet></router-outlet>

И вот здесь компоненты для членской и публичной областей:

member.component.html:

<button nz-button [nzSize]="size" nzType="primary (click)="authService.logout()">Logout</button>

public.component.html:

<button nz-button [nzSize]="size" nzType="primary" (click)="authService.login()">Login</button>

Answer 1

При вашем первоначальном подходе я предлагаю вам использовать переменную как наблюдаемую, которая определяет, авторизован ли пользователь или нет, лучше, чем вызывать функцию authService.isAuthorized ().Вы можете сделать это, определяя наблюдаемое свойство в вашем authservice:

AuthService.ts

isAuthorized() {
    ...
    this.isAuthorized.next(true);
}
isAuthorized$ = this.isAuthorized.asObservable();

Таким образом, свойство будет автоматически обновляться в вашем основном шаблоне, выполняя что-то вроде этого:

app.component.ts

authService.isAuthorized$.subscribe((response) => {
    this.isAuthorized = response;
});

Затем вы можете использовать в своем основном шаблоне:

app.component.html

<div *ngIf="isAuthorized" ; else showLogin">

И чтобы справиться с возможным ожиданием, как уже прокомментировал AJT_82, было бы лучше поставить счетчик, пока не будет сделан вызов.

Answer 2

Я не знаю, как это сделать без маршрутизации.Почему вы не хотите его использовать?Это будет так просто: с помощью класса Angular canActivate в вашем файле app-routing.module.ts.

Для этого вам потребуется реализовать службу аутентификации, которая проверяет, вошел ли пользователь в систему или нет.

Пример:

   const routes: Routes = [
      {
        path: '',
        component: MemberComponent,
        canActivate: [YourAuthGuard],
      },
      {
        path: 'public',
        component: PublicComponent
      }
    ];
    @NgModule({
      imports: [...],
      exports: [...],
      providers: [ YourAuthGuard ]
    })
    export class AppRoutingModule { }

Затем вы можете поместить перенаправления из одного компонента в другой с помощью метода navigate () класса Angular Router.

Надеюсь, это поможет вам.