#Resetting UI Without Page Refresh After User Logout

10 messages · Page 1 of 1 (latest)

radiant halo
#

Hello

I've made my logout method return an Observable, and I use subscribe in my navbar component to navigate to the login page. However, my navbar does not update to reflect the user's logged-out state unless I manually refresh the page.

// Authentication service
private readonly TOKEN_KEY = 'auth_token';
connected = signal<boolean>(false);
username = signal<string>('');
mode = signal<'usr' | 'emp'>('usr');

logout(): Observable<boolean> {
sessionStorage.removeItem('auth_token');
this.connected.set(false);
return of(true);
}

And in my Navbar component:

// Calling logout
this.authService.logout().subscribe(() => {
this.router.navigate(['/login']);
});

How can I ensure my UI properly resets without needing to refresh the page?

thorn nimbus
#

Returning an observable is useless here, since all the code is synchronous. But that's not the issue. What is the code of your navbar component?

radiant halo
#

export class NavbarComponent implements OnInit{

NavbarPosition = NavbarPosition;

givenName = '';
familyName = '';

@ViewChild('themedialog')
themeDialog! : ElementRef;

constructor(
public navbarService: NavbarService,
public dialogService: DialogService,
public popupService: PopupService,
public authService: AuthenticationBuiltinService,
private router:Router ) {}

// Opens the URL in a new tab while preventing event propagation in the current tab
openLinkInNewTab(url: string, event: MouseEvent): void {
event.preventDefault();
event.stopPropagation(); // Stops the propagation of the event
window.open(url, '_blank'); // Opens the link in a new tab
}

ngOnInit() {
const storedUserInfo = sessionStorage.getItem('user_info');
if (storedUserInfo) {
const userInfo = JSON.parse(storedUserInfo);
this.givenName = userInfo.given_name;
this.familyName = userInfo.family_name;
}
}
logout() {
this.authService.logout().subscribe({
next: (success) => {
if (success) {
this.router.navigate(['/login']);
}
},
error: (err) => {
console.error('Erreur lors de la déconnexion', err);
}
});
}
}

thorn nimbus
#

This component reads the user information from session storage once, in ngOnInit(), and stores them in two component properties. You never re-read or reset them after the successful logout, so why would they change?

radiant halo
#

I need to refresh the page so that it looks like the first .

viscid mango
#

You are more likely updating your navbar based on some condition: you need to update the related properties.

radiant halo
#

in fact the navbar is managed by content

viscid mango
radiant halo
viscid mango
# radiant halo

then you need to update navbarService.Groupsif that's the part responsible for displaying the related content