ログアウトでサイドバーとヘッダーが角で表示される4

Question

管理ダッシュボードを作成しようとしています。まず、ログイン画面にリダイレクトされ、正常にログインすると、管理ダッシュボードが表示されます。問題は、ヘッダーのログアウトボタンをクリックした後、サイドバーとヘッダーが表示されますか？私はログイン画面だけにリダイレクトされるべきです。どのように構造化するか、またはこれに対処する方法についての助け？

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

認証サービスは、ユーザかどうかを決定するために変数を使用LOGGEDINログインしているかどうか。ヘッダーとサイドバーが表示されるべきかどうかを判断するために使用される変数です。この変数は、ログアウト時に更新されず、ログアウトを呼び出した後でもtrueを返します。

適切なログイン状態を設定するためにあなたのlogoutメソッドを更新します。

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