Redirection de composants Angular 7 sans routage

Question

Avec ma configuration actuelle d'Angular 7 et de Firebase, j'ai la situation suivante :

J'ai le composant principal de l'application qui affiche la zone membre si l'utilisateur est connecté ou sinon la zone publique. Tout fonctionne bien, mais il y a un délai de 1 à 2 secondes avant que le bon composant ne s'affiche après la connexion ou la déconnexion. Je ne veux pas utiliser le routage car je veux tout afficher avec la même URL.

Avez-vous une idée de la façon dont je peux réduire le délai et est-ce une bonne pratique d'authentification de toute façon ? Je vous remercie de votre aide !

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>

Voici ensuite les composants de l'espace membre et de l'espace public :

membre.composant.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

Je ne sais pas comment le faire sans routage. Pourquoi ne voulez-vous pas l'utiliser ? Ce serait aussi simple que cela : Utiliser la classe canActivate d'Angular dans votre fichier app-routing.module.ts.

Pour cela, vous devrez mettre en place un service d'authentification qui vérifie si l'utilisateur est connecté ou non.

Exemple :

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

Vous pouvez ensuite mettre en place des redirections d'un composant à l'autre avec la méthode navigate () de la classe Angular Router.

J'espère que cela vous aidera.

Answer 2

Avec votre approche initiale, je vous suggère d'utiliser une variable comme observable qui définit si l'utilisateur est autorisé à entrer ou non, plutôt que d'appeler la fonction authService.isAuthorized(). Vous pouvez le faire en définissant une propriété observable dans votre authservice :

AuthService.ts

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

De cette façon, la propriété sera automatiquement mise à jour dans votre modèle principal en faisant quelque chose comme ceci :

app.component.ts

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

Vous pouvez ensuite l'utiliser dans votre modèle principal :

app.component.html

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

Et pour gérer l'attente éventuelle, comme AJT_82 l'a déjà fait remarquer, il serait préférable de mettre un spinner jusqu'à ce que l'appel ait été effectué.