Angular 6 中的 AuthHttp（从 Angular2 迁移到 Angular6）答案

【问题标题】：AuthHttp in Angular 6 (Migration from Angular2 to Angular6)Angular 6 中的 AuthHttp（从 Angular2 迁移到 Angular6）
【发布时间】：2019-03-30 20:07:44
【问题描述】：

我最近将我的应用程序从 Angular2 迁移到 Angular6

由于 Angular2-JWT，我的构建失败，因此我将其升级到 @auth0/angular-jwt

现在我在更新我的代码时卡住了，因为 AuthHTTP 和 AuthConfig 已被弃用。

我的 security.module.ts 有一个 factory.ts。而且我必须向我的 security.module.ts 返回一个 New AuthHttp。

export function AuthHttpServiceFactory( http: Http, options: RequestOptions) {
  const accessToken = this.accessTokenService.getAccessToken();
  const userInfoToken = this.accessTokenService.getUserInfoToken();
  return new AuthHttp(
    new AuthConfig({
      tokenName: 'token',
      tokenGetter: (() => accessToken),
      globalHeaders: [{ 'Content-Type': 'application/json' }, { 'userinfotoken': userInfoToken }],
    }), http, options);
}

现在我在返回 AuthHttp 时遇到错误。

我的Security.Module.ts如下。

@NgModule({
  providers: [
    LocalStorageService,
    {
      provide: AuthHttp,
      useFactory: AuthHttpServiceFactory,
      deps: [Http, RequestOptions]
    }
  ]
})

我在提供时也遇到错误：AuthHttp。

感谢任何帮助。

【问题讨论】：

恕我直言，AuthHttp 是相当无用的服务。我很久以前就在使用它，然后改用 Angular 的 HttpClient 来自己设置标头（这几乎是您需要做的所有事情）。更少的依赖和更清晰的代码。
感谢您的回答。但我不知道如何使用 HttpClient 而不是 AuthHttp。你能告诉我怎么做吗？
HttpClient 是 Angular 的内置模块/服务，用于执行 HTTP 请求。很可能某些版本的 AuthHttp 也在使用它。试试看这里angular.io/guide/http 如果您需要全局添加身份验证标头，您不妨创建自己的服务，在其中使用 HttpClient，添加标头并在您的应用程序中使用它。您基本上会创建自己的“AuthHttp”。
Import "Http, RequestOptions and Headers from @angular/http 并添加请求选项到响应中。Header Authorization 应该包含 token.let headers = new Headers(); let token = localStorage.getItem('token '); headers.append('Authorization', 'Bearer' + token) let options = new RequestOptions({ headers: headers });

标签： angular jwt angular6 auth0 angular2-jwt

【解决方案1】：

这是使用 HttpClient 和 HttpHeaders 作为服务添加身份验证的方法

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Injectable({
providedIn: 'root'
})
export class VehicleService {

headers;
private readonly vehicleEndpoint = 'api/vehicles';


constructor(private http: HttpClient) {

}


create(vehicle) {
    return this.http.post(this.vehicleEndpoint, vehicle, this.addHeaders());
}

addHeaders() {
    var access_token = localStorage.getItem('access_token');
    return { headers: new HttpHeaders().set("Authorization", `Bearer   
${access_token}`) };
}

access_token 是 Json Web 令牌。

https://angular.io/api/common/http/HttpHeaders

https://angular.io/guide/http

【讨论】：