angular - Stop flickering of menu when is logged in - Stack Overflow

admin管理员组

文章数量:1290946

Using Angular 19 and angular-auth-oidc-client I have the HomeComponent code:

export class HomeComponent implements OnInit {

  private readonly oidcSecurityService = inject(OidcSecurityService);

  private readonly eventService = inject(PublicEventsService);

  isAuthenticated = signal<boolean>(false);
  isCheckingAuth = signal<boolean>(true); 

  ngOnInit(): void {

    this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
      this.isAuthenticated.set(isAuthenticated);
      this.isCheckingAuth.set(false);
    });

    this.eventService
      .registerForEvents()
      .pipe(filter((event) => event.type === EventTypes.CheckSessionReceived || event.type === EventTypes.UserDataChanged))
      .subscribe((event) => {
        console.log('Auth event received:', event);
        this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
          this.isAuthenticated.set(isAuthenticated);
        });
      });
  }

And the HTML is:

<div *ngIf="!isCheckingAuth(); else loading">
  <div *ngIf="isAuthenticated(); else noAuth">
    <button (click)="logout()">Logout</button>
    <button (click)="logoffAndRevokeTokens()">Logout and revoke tokens</button>

    Is Authenticated: {{ isAuthenticated() }}

  </div>
</div>

<ng-template #noAuth>
  <button (click)="login()">Login</button>
  <hr />
</ng-template>

<ng-template #loading>
  <p>Loading authentication...</p>
</ng-template>

After I login I still can see the login button for an instance.

And the same when I refresh the page and I am logged in.

How can I stop this flickering?

Using Angular 19 and angular-auth-oidc-client I have the HomeComponent code:

export class HomeComponent implements OnInit {

  private readonly oidcSecurityService = inject(OidcSecurityService);

  private readonly eventService = inject(PublicEventsService);

  isAuthenticated = signal<boolean>(false);
  isCheckingAuth = signal<boolean>(true); 

  ngOnInit(): void {

    this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
      this.isAuthenticated.set(isAuthenticated);
      this.isCheckingAuth.set(false);
    });

    this.eventService
      .registerForEvents()
      .pipe(filter((event) => event.type === EventTypes.CheckSessionReceived || event.type === EventTypes.UserDataChanged))
      .subscribe((event) => {
        console.log('Auth event received:', event);
        this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
          this.isAuthenticated.set(isAuthenticated);
        });
      });
  }

And the HTML is:

<div *ngIf="!isCheckingAuth(); else loading">
  <div *ngIf="isAuthenticated(); else noAuth">
    <button (click)="logout()">Logout</button>
    <button (click)="logoffAndRevokeTokens()">Logout and revoke tokens</button>

    Is Authenticated: {{ isAuthenticated() }}

  </div>
</div>

<ng-template #noAuth>
  <button (click)="login()">Login</button>
  <hr />
</ng-template>

<ng-template #loading>
  <p>Loading authentication...</p>
</ng-template>

After I login I still can see the login button for an instance.

And the same when I refresh the page and I am logged in.

How can I stop this flickering?

• angular
• angular19

Share Improve this question Follow asked Feb 13 at 16:47 Miguel MouraMiguel Moura 39.5k9797 gold badges289289 silver badges532532 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

It might be due to SSR, just use defer() so that the HTML is rendered only on the browser. Due to the HTML being rendered on the server and again hydrated on the browser, the flickering might be happening.

@defer() {
  <div *ngIf="!isCheckingAuth(); else loading">
    <div *ngIf="isAuthenticated(); else noAuth">
      <button (click)="logout()">Logout</button>
      <button (click)="logoffAndRevokeTokens()">Logout and revoke tokens</button>

      Is Authenticated: {{ isAuthenticated() }}

    </div>
  </div>
}

---

You can also explore Hybrid Rendering with SSR routes to conditionally render these routes.

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
  {
    path: '/protected-route', // This renders the "/protected-route" route on the client (CSR)
    renderMode: RenderMode.Client,
  },

本文标签： angularStop flickering of menu when is logged inStack Overflow