Question

我正在使用HttpService使用Angular 4，我正在尝试迁移到HttpClientService。

但我收到的错误如下

ERROR in src/app/app.service.ts(19,102): error TS2559: Type 'Headers' has no properties in common with type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.

请参阅我的app.service.ts

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

import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class AppService {

    // tslint:disable-next-line:max-line-length
    private token: any = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjYxMmMyMDEyNmI1ZTY1ZGE3NWE3YmQ3MmJlNGYzMDIzYWZ5a9';
    public headers = new Headers({
        'Content-type': 'application/json',
        'Authorization' : `Bearer ${this.token}`
    });
    constructor(private http: HttpClient) { }

    getData() {
        return this.http.get('http://192.111.99.**/cloudnew/public/api/generic/registrations/view/0', this.headers);
    }
}

Answer 1

根据下面的评论....我建议实施Http拦截器......就像这样....

您首先需要一个首先抓取令牌的身份验证服务，然后您可以存储令牌广告，并将每个请求与拦截器一起发送。

import { Inject, Injectable, Optional, OnInit, OnDestroy } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable, Subject, Subscription } from 'rxjs';
import * as moment from 'moment';

@Injectable()
export class AuthService implements OnInit, OnDestroy {

  subscriptions: Subscription[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.subscriptions.push(this.login().subscribe(res=> this.handleLogin(res)));
  }

  ngOnDestroy() {
    this.subscriptions.forEach(s=> s.unsubscribe());
  }

  getBaseHeader(): HttpHeaders {
    const header = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return header;
  }

  getAuthHeaders(): HttpHeaders {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': this.token
    });
    return headers;
  }

  getHeaders(): HttpHeaders {
    if(this.token && this.validateToken()) {
      return this.getAuthHeaders();
    } else {
      return this.getBaseHeader();
    }
  } 

  storeLogin(response: Response) {
    .... store login token etc...
  }

  getStoredLogin(): any {
    ... get login/token etc...
  }

  getToken(): string {
    return this.token;
  }

  login(): Observable<Response> {
    const headers = new Headers({'Content-Type': 'application/json'});
    const options = new RequestOptions({headers: headers});
    return this.http.post(path, { body to be sent ie login password }, options);
  }

  loggedIn(): boolean {
    return ....login crentials | false/null;
  }

  validateToken() {
    return moment(this.tokenExpiration).isAfter(moment().second());
  }

  handleError(err: Response, fn?: string) {
    console.log(typeof err);
    if(fn) console.log(fn);
    console.log(err.toString());
  }
}

那么拦截器......

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpHandler, HttpRequest, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../../services/auth.service';

@Injectable()
export class ApiInterceptor implements HttpInterceptor {

  constructor(private inj: Injector) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let authService = this.inj.get(AuthService);
    const authHeader = authService.getHeaders();
    const authReq = req.clone({headers: authHeader});
    return next.handle(authReq);
  }
}

这样，拦截器会在initil登录后为您完成所有工作。将代码简化为更多的shell而不是工作应用程序的代码片段

angular5中的HttpClient问题

1 个答案: