La déconnexion affiche toujours la barre latérale et l'en-tête en mode angulaire 4

Question

J'essaie de créer un tableau de bord d'administration. Tout d'abord, vous serez redirigé vers l'écran de connexion, après la connexion avec succès, vous verrez le tableau de bord d'administration. Le problème repose après que je clique sur le bouton de déconnexion sur l'en-tête, je peux voir la barre latérale et l'en-tête? Je devrais être redirigé vers l'écran de connexion seul. Toute aide sur la façon de structurer ou comment y remédier?

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'); 
    } 
} 

Answer 1

Le service auth utilisent la loggedIn variable pour déterminer si un utilisateur est connecté ou non. C'est la variable qui est utilisée pour déterminer si l'en-tête et la barre latérale doivent être visibles. Cette variable n'est pas mise à jour lorsque vous vous déconnectez et continuera à renvoyer true même après que vous avez appelé la déconnexion.

Mettez à jour votre méthode logout pour définir l'état de connexion correcte:

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