Angular 6：发送经过身份验证的请求

Question

我正在尝试在 angular 6 中实现 angular2-jwt 发送实现请求，但我收到错误，似乎此包不适用于 angular 6

我的代码：

import { NgModule } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: 'token',
        tokenGetter: (() => sessionStorage.getItem('token')),
        globalHeaders: [{'Content-Type':'application/json'}],
    }), http, options);
}

@NgModule({
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [Http, RequestOptions]
    }
  ]
})
export class AuthModule {}

错误：

ERROR in node_modules/angular2-jwt/angular2-jwt.d.ts(3,10): error TS2305: Module '"D:/.../.../.../node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

Answer 1

您使用的angular-jwt 版本不支持Angular 6 和RxJS 6。

您应该删除此版本并安装较新的版本：

npm install @auth0/angular-jwt

并按如下方式使用：

import { JwtModule } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';

export function tokenGetter() {
  return localStorage.getItem('jwt');
}

@NgModule({
  imports: [
    // this is the specific part
    HttpClientModule,
    JwtModule.forRoot({
      config: { tokenGetter }
    }),
  ]
})
export class AuthModule {}

这将使在AuthModule 中使用HttpClient 发出的每个HTTP 请求都会自动发送凭据。

您可以通过在组件/服务中注入 JwtHelperService 来使用库提供的实用程序功能（检查令牌有效性等）：

import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable
export class MyService {
  constructor(private jwtUtil: JwtHelperService) {}
}

您可以阅读文档here。