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

Posted 2023-03-10

【中文标题】Angular 6：发送经过身份验证的请求

【英文标题】：Angular 6 : Sending authenticated request

【发布时间】：2019-03-29 19:49:24

【问题描述】：

我正在尝试在 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'.

【问题讨论】：

现在检查问题

好像是rxjs的版本冲突。

是的，可能是因为我使用的是 Angular 6？

【参考方案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。

【讨论】：

好的，现在如何实现 jwthelperservice 代替旧版本？

好吧，我如何在这个函数中使用 authmodule 方法 getUsers(): Observable return this.http .get(this.baseUrl + 'users', this.jwt() ) .pipe(map(res => res.json())) .pipe(catchError(this.handlerError));

JwtModule 设置 HTTP 拦截器，将所需的身份验证标头添加到每个请求中，这样您就不必做任何事情。您必须使用HttpClient 提出请求：httpClient.get(this.baseUrl + ...)。

我们在哪里可以谈谈以澄清一切，因为这是我第一次使用 jwt 身份验证，我对此了解不多

getUsers(): Observable return this.http .get(this.baseUrl + 'users') .pipe(map(res => res.json ())) .pipe(catchError(this.handlerError));我收到错误：“对象”类型上不存在“json”