令牌未过期模块不起作用，Angular 6答案

【问题标题】：Token Not Expired Module is not working, Angular 6令牌未过期模块不起作用，Angular 6
【发布时间】：2019-03-12 23:37:47
【问题描述】：

import { tokenNotExpired } from 'angular2-jwt';

错误：

node_modules/angular2-jwt/angular2-jwt.d.ts(3,10) 中的错误：错误 TS2305：模块 '"C:/Users/Charles Edwin Ison/OOP/node_modules/rxjs/Observable"' 没有导出成员“可观察”。 node_modules/rxjs/Observable.d.ts(1,15): 错误 TS2307: 找不到模块 'rxjs-compat/Observable'。

如何解决这个问题？

【问题讨论】：

请看链接stackoverflow.com/questions/50188560/…
I get an error when learning Angular."has no exported member 'Observable'"的可能重复

标签： angular typescript jwt

【解决方案1】：

我使用 @auth0/angular-jwt 和 angular 6 解决了这个问题。您首先需要完全卸载 angular2-jwt：

npm uninstall angular2-jwt --save

然后就可以运行了：

npm install @auth0/angular-jwt

只有这两个命令行对我有帮助。

【讨论】：

感谢分享您的解决方案。但是，此库中不提供 tokenNotExpired。这个函数是怎么导入的？

【解决方案2】：

如果您使用的是 Angular 4.3 或更高版本，则不支持旧版本的 angular2-jwt。如果你使用旧版本，你会得到更多的错误，因为它依赖于来自 Angular 的 HttpClient 的 Http 拦截器。你可以做的是下载新版本 @auth0/angular-jwt 并实现 tokenNotExpired 的方法

# installation with npm
npm install @auth0/angular-jwt

你可以这样实现

export function tokenGetter(access_token : string) {
  return localStorage.getItem(access_token);
}

private tokenNotExpired(token : string)
{
  const item: string = tokenGetter(token);
  return item != null && !this.jwtHelper.isTokenExpired(item);
}

【讨论】：

【解决方案3】：

npm uninstall angular2-jwt
npm install @auth0/angular-jwt
npm install rxjs-compat --save

在 auth.service.ts 中：

import { JwtHelperService } from "@auth0/angular-jwt";
 token: string

  isAuthenticated() {
return this.jwtHelper.isTokenExpired(this.token);

}

在 header.component.html 中：

 <a class="nav-link" [routerLink]="['/dashboard']" routerLinkActive="active-link"
       *ngIf="!authService.isAuthenticated()"
       [routerLinkActiveOptions]="{exact: true}">Dashboard</a>
    <a class="btn btn-outline-primary me-2"  *ngIf="authService.isAuthenticated()"
       [routerLink]="['/auth']" tabindex="-1" aria-disabled="true">Sign in</a>

【讨论】：

【解决方案4】：

删除 angular2-jwt 包
添加对新包的引用

npm uninstall angular2-jwt
npm install @auth0/angular-jwt

在代码中添加 tokenNotExpired 函数；

import { JwtHelperService } from "@auth0/angular-jwt";
private tokenNotExpired()
{
    const jwtService: JwtHelperService = new JwtHelperService();
    const item: string = jwtService.tokenGetter();
    return item != null && !jwtService.isTokenExpired(item);
}

你可以在任何地方使用它：

public loggedIn() {
    if (localStorage.getItem('id_token') === '' ||
        localStorage.getItem('id_token') === null ||
        localStorage.getItem('id_token') === undefined) {
      return false;
    } else {
      return this.tokenNotExpired();
    }
}

【讨论】：