Logout zeigt immer noch Sidebar und Header in Angular 4

Question

Ich versuche, ein Admin-Dashboard zu erstellen. Zuerst werden Sie zum Login-Bildschirm weitergeleitet, nach erfolgreicher Anmeldung sehen Sie das Admin-Dashboard. Das Problem hängt davon ab, ich klicke auf den Abmelden-Button in der Kopfzeile, kann ich die Sidebar und Header sehen? Ich sollte allein zum Login-Bildschirm weitergeleitet werden. Irgendwelche Hilfe bei der Strukturierung oder wie soll man das angehen?

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

den AUTH Dienst verwenden, um die variable LoggedIn, wenn ein Benutzer zu bestimmen, ist eingeloggt oder nicht. Dies ist die Variable, die verwendet wird, um zu bestimmen, ob die Kopfzeile und die Seitenleiste sichtbar sein sollen. Diese Variable wird beim Abmelden nicht aktualisiert und wird auch nach dem Abmelden weiterhin true zurückgeben.

Aktualisieren Sie Ihre Abmeldung Methode den richtigen Login-Status zu setzen:

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