각도 2 사용자가 로그인했는지 여부에 따라 특정 구성 요소로 라우팅

Question

사용자가 등록 된 자격 증명을 사용하여 로그인 할 수있는 간단한 응용 프로그램을 만들었습니다.

"사용자"메뉴를 클릭 할 때 현재 로그인되어 있는지 여부에 따라 특정 구성 요소로 이동하도록 사용자에게 약간 더 직관적으로하고 싶습니다. ; 로그인 한 사용자

- 나는 다음이, 지금까지

---

에 로그인 할 수 있습니다> 구성 -> 수 있습니다 구성 요소

로그 아웃 사용자가 로그 아웃

import { Component, OnInit } from "@angular/core"; 
import { AuthService } from "./auth/auth.service"; 

@Component({ 
    selector: 'app-header', 
    template: ` 
     <header class="row"> 
      <nav class="col-md-8 col-md-offset-2"> 
       <ul class="nav nav-pills nav-justified"> 
        <li routerLinkActive="active"><a [routerLink]="['/authors']">Authors</a></li> 
        <li *ngIf="isLoggedIn" routerLinkActive="active"><a [routerLink]="['/user/logout']">User</a></li> 
        <li *ngIf="!isLoggedIn" routerLinkActive="active"><a [routerLink]="['/user']">User</a></li> 
       </ul> 
      </nav> 
     </header> 
    ` 
}) 
export class HeaderComponent implements OnInit { 
    constructor(private authService: AuthService){} 
    isLoggedIn: boolean 


    ngOnInit() { 
     this.isLoggedIn = this.authService.isSignedIn(); 
    } 
} 

그러나, 단지 업데이트하지 않았습니다 내 서비스에 의해 채워집니다 값 isLoggedIn으로 페이지를 새로 고침에 작동하는 것 같다.

Angular2와 함께 평균 스택을 사용하여 가장 잘 수행 할 수있는 방법에 대한 제안은 크게 감사하겠습니다.

Answer 1

찾는 논리를 변경함으로써 해결 생성자

constructor(private router : Router, 
      private authService: AuthService){ 
    if(!this.authService.isSignedIn()){ // not of negative case 
     this.router.navigateByUrl('/signin') //path 
    } 

} 

Answer 2

내부 체크. 사용자가 링크를 클릭 할 때 경로를 변경하려고하는 것이 아닙니다. 이제로드 구성 요소 후 노선

ngOnInit() { 
    if(this.authService.isSignedIn()){ 
     this.router.navigateByUrl('/user/logout'); 
    }}