Auth0/Angular2-Jwt 不适用于 Angular 5答案

【问题标题】：Auth0/Angular2-Jwt not working with Angular 5Auth0/Angular2-Jwt 不适用于 Angular 5
【发布时间】：2018-07-04 18:00:47
【问题描述】：

Angular2-JWT 具有我需要使用的特定功能，以便根据存储在 localStorage 中的记录的用户令牌显示/隐藏链接。

tokenNotExpired();

我一直在寻找替代方法来实现显示导航链接 IF 令牌在 localStorage 中但似乎不起作用的条件语句。

 import { Injectable } from '@angular/core';
 import {Http, Headers} from '@angular/http';
 import 'rxjs/add/operator/map'
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { HttpClientModule } from '@angular/common/http';
 import { CanActivate} from '@angular/router';
 import {FlashMessagesModule} from 'angular2-flash-messages';
 import { JwtModule } from '@auth0/angular-jwt';
 @Injectable()
 export class AuthService{
   authToken:null;
   user:any;
    isLoggedin: boolean = false;
   constructor(private http:Http) { }



   isLoggedIn() {
     if (localStorage.getItem("id_token") == null) {
         this.isLoggedin = false;
         console.log(this.isLoggedIn);
         return this.isLoggedin;
     }
     else {
       console.log(this.isLoggedIn);
         return true;
     }
   }

我似乎不明白为什么它不能正常工作。也许我错过了什么。

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

在上面的 HTML 中，我尝试了两种不同的隐藏方法（NgClass 条件和 NgIf 条件）。

【问题讨论】：

不应该有 *ngIf 而不是 NgIf 吗？ NgClass 似乎也错了
我也是这么想的，但我正在改变它们并交替使用它们，因为无论哪种方式它都不适合我，因为我提出了一个条件
导航栏组件是问题所在，isLoggedIn() 在 auth.service 中，无论出于何种原因，它都不会传递给导航栏，所以我将函数移到了 navbar.component.ts 和现在可以了！！无论如何感谢您的建议:)

标签： angularjs json jwt angular5 auth0

【解决方案1】：

重要的一点是要知道哪些架构经常更改，例如。用户、公司或项目...

如果架构不经常更改，您可以将其嵌入到其父架构中，但嵌入的数据太难操作，否则您可以将其 id 嵌入到新字段中。

如果您的 UserSchema 经常更改，您可以使用child referencing。

const CompanySchema = mongoose.Schema({
    name: {
        type: String
    },
    ....
    userIds: [1, 2, 3]
})

或parent referencing，如果您的 CompanySchema 经常更改。

const UserSchema = mongoose.Schema({
    name: {
        type: String
    },
    ....
    companyId: 1
})

在这一项中，companyId 可以是null。

我希望这会有所帮助。

【讨论】：

感谢您的回复，您确实帮了很多忙。现在更有意义了。