Angular5中Auth0/Angular2-Jwt失效，导航栏基于Token显隐问题求助

看起来你遇到的问题主要来自几个细节错误，我帮你逐一排查并修正：

1. Angular指令语法错误（最关键问题） #

Angular的指令是区分大小写的，且结构指令、属性绑定有固定写法：

• 你写的NgIf应该改为*ngIf（结构指令需要前缀*，且全小写开头）
• NgClass应该改为[ngClass]（属性绑定需要用方括号包裹，小写开头）
  这些语法错误会直接导致指令无法被Angular识别，自然不会生效。

2. AuthService中isLoggedIn方法的优化 #

你的服务方法里有两处冗余/错误：

• console.log(this.isLoggedIn)打印的是方法本身，而非判断结果，应该改为打印实际布尔值
• 维护isLoggedin变量完全多余，直接返回token是否存在的判断结果即可

修正后的AuthService代码：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { CanActivate } from '@angular/router';

@Injectable()
export class AuthService {
  authToken: any = null; // 修正类型声明和初始化
  user: any;

  constructor(private http: Http) { }

  isLoggedIn(): boolean {
    // 双重感叹号将null/字符串转为布尔值：有token返回true，无则返回false
    const hasValidToken = !!localStorage.getItem("id_token");
    console.log('登录状态:', hasValidToken); // 正确打印判断结果
    return hasValidToken;
  }
}

3. 模板逻辑修正（统一显示/隐藏规则） #

你原来的模板里NgClass和NgIf逻辑矛盾：NgClass是登录时添加invisible隐藏，NgIf是登录时显示。根据需求二选一即可：

方案一：用*ngIf控制单个导航项显示 #

如果需要登录时显示所有导航链接：

<ul class="nav-l">
  <li class="nav-link" *ngIf="authService.isLoggedIn()" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/home'">Home</a>
  </li>
  <li class="nav-link" *ngIf="authService.isLoggedIn()" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/about'">About</a>
  </li>
  <li class="nav-link" *ngIf="authService.isLoggedIn()" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/feature'">Features</a>
  </li>
  <li class="nav-link" *ngIf="authService.isLoggedIn()" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/contact'">Contact</a>
  </li>
</ul>

方案二：用[ngClass]控制整个导航栏显示 #

如果需要未登录时隐藏整个导航栏：

<ul class="nav-l" [ngClass]="{'invisible': !authService.isLoggedIn()}">
  <li class="nav-link" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/home'">Home</a>
  </li>
  <li class="nav-link" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/about'">About</a>
  </li>
  <li class="nav-link" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/feature'">Features</a>
  </li>
  <li class="nav-link" 
      [routerLinkActive]="['active']" 
      [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="'/contact'">Contact</a>
  </li>
</ul>

4. 确保组件正确注入AuthService #

最后，要确保导航组件已注入AuthService，且声明为public（让模板能访问服务方法）：

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service'; // 根据你的实际路径调整

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html'
})
export class NavigationComponent {
  // 用public修饰，让模板可以直接访问authService
  constructor(public authService: AuthService) { }
}

做完这些修改后，导航链接的显示/隐藏应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Mark Shanahan ッ