Выход из системы по-прежнему показывает боковую панель и заголовок в Angular 4

Я пытаюсь создать админ-панель. Сначала вы будете перенаправлены на экран входа в систему, после успешного входа в систему вы увидите панель администратора. Проблема возникает после того, как я нажму кнопку выхода в заголовке, я вижу боковую панель и заголовок? Я должен быть перенаправлен только на экран входа в систему. Любая помощь о том, как структурировать или как решить эту проблему?

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

authentication angular angular-routing angular-services
person Joseph    schedule 05.09.2017    source источник
comment
Пожалуйста, добавьте код, который вы вызываете при выходе из системы   -  person hagner    schedule 05.09.2017
comment
@hagner. Пожалуйста, проверьте еще раз. Просто добавил   -  person Joseph    schedule 05.09.2017
comment
Не могли бы вы также добавить свой код authService?   -  person hagner    schedule 05.09.2017
comment
@hagner. Просто добавил это   -  person Joseph    schedule 05.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Служба аутентификации использует переменную loggedIn, чтобы определить, вошел ли пользователь в систему или нет. Это переменная, которая используется для определения, должны ли быть видны заголовок и боковая панель. Эта переменная не обновляется при выходе из системы и будет продолжать возвращать значение true даже после того, как вы вызвали выход.

Обновите метод выхода из системы, чтобы установить правильный статус входа:

logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('auth_token');
    this.loggedIn = false;
}
person hagner    schedule 05.09.2017
comment
Спасибо, это работает. Сначала я подумал, что вам нужно добавить новый компонент и добавить заголовок и боковую панель. Вау, большая помощь. Спасибо - person Joseph; 05.09.2017