0

I have created the login, register, change password and logout services (and they work). The username displays instead of the log in button after the user is logged in, but the user needs to refresh the site or navigate to a different url for the username to be displayed.

location.reload() solves the issue, but it's not exactly the best thing to do here.

My authentication routes are structured like this:

In app-routing.module.ts I have:

path: 'auth',
loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)

Then in pages-routing.module I have the authentication routes, for example:

path: 'login',
component: LoginComponent

I use a service for each authentication process located in app/services/ and the components are in the app/pages/ directory.

EDIT: To clarify: The login form is a popup that can appear in every page of my website. So the button that opens the log in form is replaced with the username once a user logs in, but this happens when the user reloads the page or navigates to a different url. I want this to happen as soon as a user logs in (or registers, logs out etc) and I want the user to stay on the same page. One way I can think of doing it is to quickly navigate to another page and then come back to the same page but I don't think that's a good solution

Rron Kurtishi
  • 33
  • 2
  • 7
  • The question is not very clear. You have a service that does the authentication, a login component that will kick in if the user is not logged in yet and you want to, once the login is done, redirect the user to a page in your app? Seems to me that you are looking for CanActivate guard (https://angular.io/api/router/CanActivate) – Guilhermevrs Sep 16 '20 at 10:02
  • So the user clicks the login button, login form shows, user logs in, but nothing changes in the front end until the user reloads the page or navigates to a different url. After the user logs in I would like to refresh the page/component so that the updated information (username) show instead of the login button. Can I use CanActivate guard for this purpose? – Rron Kurtishi Sep 16 '20 at 10:11

1 Answers1

1

You can navigate to other routes by Router service like below:

import {Router} from '@angular/router';

constructor(private router: Router) {}

navigateToLogin() {
  this.router.navigateByUrl('/login');
}

you can use .navigateByUrl() to go to some absolute path and .navigate() to go to some other url by relative path.

Muzaffar Mahmood
  • 1,688
  • 2
  • 17
  • 20
  • Thanks for the help but this doesn't solve my problem. Let me clarify my question, I want to refresh the page/component AFTER the user logs in successfully so that the page is updated with the user's information. Right now it works, but the user has to reload the page or navigate to a different url. I want the user to stay on the same page after logging in (the login form is a popup that displays in all pages), but the page must be reloaded. One solution I'm thinking of (idk if it's possible) is to quickly navigate to home page and then back to current page but I'm sure there's a better way. – Rron Kurtishi Sep 16 '20 at 10:16
  • Please look into this: https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router – Muzaffar Mahmood Sep 16 '20 at 10:34