login/logout navigation in Angular

Question

In my menu, I have an item named Logout , When the user clicks on Logout , the user isn't direct to the login page but toward the portfolio page. I d'ont understand the problem.

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: PortfolioComponent,
    canActivate: [AuthGuard],
  },

  {
    path: 'login',
    component: LoginComponent,
  },

  {
    path: 'portfolio',
    component: PortfolioComponent,
  },

app.component.ts

private createLinks() {
    this.links = [
        new NavigationLink(
            'Sélection du portefeuille',
            ['portfolio'],
            'fa fa-credit-card'
        ),
        new NavigationLink(
            'Corporate actions',
            ['corporate-action'],
            'fa fa-university'
        ),
        new NavigationLink('Valeurs', ['value'], 'fa fa-bar-chart'),
        new NavigationLink('Indices Boursiers', ['indice'], 'fa fa-line-chart'),
        new NavigationLink('Devises', ['devise'], 'fa fa-money'),
        new NavigationLink(
            'Tableau de valeurs',
            ['valuable-table'],
            'fa fa-list-alt'
        ),
        new NavigationLink('Logout', ['/login'], 'fa fa-circle-o-notch'),
    ];
}

logout() {
    this.authenticationService.logout();
    this.router.navigate(['/login']);
}

I can give you my code -> Stackblitz , the password is test1 .

Answer 1

Because you're not logging out.

In navigation-side-panel.component.html , you're ONLY routerlinking to the login page WITHOUT logging out in your auth service.

In the login.component.ts constructor, on line 27, you check if the auth service user is still valid, and navigate to ['/'].