Logout Still Shows Sidebar and Header in Angular 4

Question

I'm trying to create a admin dashboard. First, you will be redirected to the login screen, after successfully logging in, you will see the admin dashboard. The problem relies after i click the logout button on the header, I can see the sidebar and header? I should be redirected to the login screen alone. Any help on how to structure or how to address this?

app.component.html

<ng-template [ngIf]="authService.isLoggedIn()">
<app-header></app-header>
<app-sidebar></app-sidebar>  
</ng-template>
<router-outlet></router-outlet>

app.component.ts

import{ NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SigninComponent } from './auth/signin/signin.component';
import { AuthGuard } from './auth/auth-guard.service';

const appRoutes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'signin', component: SigninComponent },
    { path: 'users', loadChildren: './user/user.module#UserModule', canActivate: [AuthGuard]},
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
];


@NgModule({
    imports: [RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})
    ],

    exports: [RouterModule]
})

export class AppRoutingModule {

}

header.component.html

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a routerLink="/" class="navbar-brand">Admin Dashboard</a>
    </div>
    <button class="btn btn-danger" style="cursor: pointer;" (click)="onSignOut()">Logout</button>
  </div>
</nav>
<br>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../auth/auth.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  constructor(private authService: AuthService,
              private route: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {
  }

  onSignOut(){
      this.authService.logout();
      this.router.navigate(['/signin']);

  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthService {
  private loggedIn = false;

  constructor(private http: Http) {
    this.loggedIn = !!localStorage.getItem('auth_token');
  }

  signinUser(email: string, password: string) {  
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http
    .post(
      'http://sample/auth/login', 
      JSON.stringify({ email, password }), 
      { headers }
      )
    .map(
        response => {
          localStorage.setItem('auth_token', response.json().id_token);
          this.loggedIn = true;
          console.log(response);
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );

   }

   isLoggedIn() {
    return this.loggedIn;
  }

   logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('auth_token');
    }
}

Please add the code you call on logout – hagner Sep 05 '17 at 07:00 — hagner, Sep 05 '17 at 07:00
@hagner. Pls check again.just added it – Joseph Sep 05 '17 at 12:55 — Joseph, Sep 05 '17 at 12:55
Could you also add your authService code? – hagner Sep 05 '17 at 13:31 — hagner, Sep 05 '17 at 13:31

score 1 · Accepted Answer · answered Sep 05 '17 at 13:44

The auth service use the variable loggedIn to determine if a user is logged in or not. This is the variable that is used to determine if the header and sidebar should be visible. This variable is not updated when you sign out and will continue to return true even after you have called logout.

Update your logout method to set the proper login status:

logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('auth_token');
    this.loggedIn = false;
}

Thanks it work. At first,I thought you need to add a new component and add the header and sidebar. Wow great help. Thanks — Joseph, Sep 05 '17 at 13:54

Logout Still Shows Sidebar and Header in Angular 4

1 Answers1