* ngIf = "authService.loggedIn（）" が表示されないリンク

Question

ビュー

<nav class="navbar navbar-inverse"> 
     <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">MEAN Auth App</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/']">Home</a></li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/dashboard']">Dashboard</a></li> 
     <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/profile']">Profile</a></li> 

     <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/login']">Login</a></li> 
     <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/register']">Register</a></li> 
     <li *ngIf="authService.loggedIn()"><a (click)="onLogoutClick()" href="#">Logout</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

コンポーネント

import { Component, OnInit } from '@angular/core'; 
import {AuthService} from '../../services/auth.service'; 
import {Router} from '@angular/router'; 
import {FlashMessagesService} from 'angular2-flash-messages'; 

@Component({ 
    selector: 'app-navbar', 
    templateUrl: './navbar.component.html', 
    styleUrls: ['./navbar.component.css'] 
}) 
export class NavbarComponent implements OnInit { 

    constructor(
    private authService:AuthService, 
    private router:Router, 
    private flashMessage:FlashMessagesService) { } 

    ngOnInit() { 
    } 

    onLogoutClick(){ 
    this.authService.logout(); 
    this.flashMessage.show('You are logged out', { 
     cssClass:'alert-success', 
     timeout: 3000 
    }); 
    this.router.navigate(['/login']); 
    return false; 
    } 

} 

私は平均スタックに新たなんだ、と私がいます角度* ngIfの問題は、ナビゲーションバーからリンクを削除しますが、戻しません。ログインやログアウト時には切り替えられません。しかし ！それらを削除しますが、永久に。 何か助けていただければ幸いです。

EDIT は、あなたはそれが実際にトークンが有効期限が切れていないかどうか確認するためにtokenNotExpired()にあなたのローカルストレージからid_tokenを渡す必要があり、この

auth.service

import { Injectable } from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { tokenNotExpired } from 'angular2-jwt'; 

@Injectable() 
export class AuthService { 
    authToken: any; 
    user: any; 

    constructor(private http:Http) { } 

    registerUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type','application/json'); 
    return this.http.post('http://localhost:3000/users/register', user,{headers: headers}) 
     .map(res => res.json()); 
    } 

    authenticateUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type','application/json'); 
    return this.http.post('http://localhost:3000/users/authenticate', user,{headers: headers}) 
     .map(res => res.json()); 
    } 

    getProfile() { 
    let headers = new Headers(); 
    this.loadToken(); 
    headers.append('Authorization', this.authToken); 
    headers.append('Content-Type','application/json'); 
    return this.http.get('http://localhost:3000/users/profile',{headers: headers}) 
     .map(res => res.json()); 
    } 

    storeUserData(token, user){ 
    localStorage.setItem('id_token', token); 
    localStorage.setItem('user', JSON.stringify(user)); 
    this.authToken = token; 
    this.user = user; 
    } 

    loadToken() { 
    const token = localStorage.getItem('id_token'); 
    this.authToken = token; 
    } 

    loggedIn() { 
    return tokenNotExpired(); 
    } 

    logout(){ 
    this.authToken = null; 
    this.user = null; 
    localStorage.clear(); 
    } 
} 

Answer 1

を追加するのを忘れ。

loggedIn() { 
    return tokenNotExpired('id_token'); 
    }