註銷仍然顯示邊欄和標題角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

auth服務使用該變量的loggedIn以確定是否用戶已登錄或未登錄。這是用來確定標題和側欄是否可見的變量。註銷後此變量不會更新，即使您已經調用註銷，該變量也會繼續返回true。

更新您的退出方法要正確設置登錄狀態：

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