Angular 注销时仍会在第4行中显示边栏和标题

我正在尝试创建一个管理仪表板。首先，您将被重定向到登录屏幕，成功登录后，您将看到管理仪表板。问题在于单击标题上的注销按钮后，我可以看到侧边栏和标题？我应该被重定向到单独的登录屏幕。关于如何构建或如何解决这一问题，有什么帮助吗

app.component.html

header.component.html

auth.service.ts

---

身份验证服务使用变量loggedIn来确定用户是否登录。这是用于确定标题和侧栏是否可见的变量。此变量在注销时不会更新，即使在调用注销后也会继续返回true

更新注销方法以设置正确的登录状态：

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

---

请添加您调用的代码logout@hagner. 请再次检查。刚刚添加的。您还可以添加您的authService代码吗？@hagner。刚刚加了一句，谢谢你。首先，我认为您需要添加一个新组件，并添加标题和侧栏。哇，帮了大忙。谢谢

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 {

}

<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>

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

  }
}

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

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