角2拦截器不能正常工作

Question

我想创建一个自定义的http类，它扩展Http来像Angular 2上的AngularJS拦截器一样工作。我遵循其他Stackoverflow问题和一些教程，但我总是得到相同的错误，而我找不到解决方案。

我有以下HTTP拦截：

import { Injectable } from '@angular/core'; 
import { Http, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers, Request } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class CustomHttp extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
     super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
     options = new RequestOptions(); 
     let headers = new Headers(); 
     headers.append('X-Auth-Token', 'Bearer ' + localStorage.getItem('access-token')); 
     options.headers = headers; 
     return super.request(url, options); 
    } 
} 

而且我已经把它添加到app.module这样的：

providers: [{ 
    provide: Http, 
    useFactory: loadCustomHttp, 
    deps: [XHRBackend, RequestOptions] 
    }], 

    export function loadCustomHttp(backend: XHRBackend, defaultOptions: RequestOptions) { 
    return new CustomHttp(backend, defaultOptions); 
} 

我不同意这个配置中获得任何错误，但当我做任何请求时，我得到一个401，因为没有添加认证头。样本请求可能是：

import { Http } from '@angular/http'; 

    getExample() { 
    let url = this.urlBase + '/test'; 

    return this.http.get(url); 
    } 

任何帮助将不胜感激，提前:)

Answer 1

的URL可以是两种不同类型，字符串或请求，所以

request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
let token = localStorage.getItem('access-token'); 

if (token) { 
    if (typeof url === 'string') { 
    if (!options) { 
     options = { headers: new Headers() }; 
    } 
    options.headers.set('Authorization', `Bearer ${token}`); 
    console.log('Url is string', options.headers.get('Authorization')); 
    } else { 
    url.headers.set('Authorization', `Bearer ${token}`); 
    console.log('Url is Request', url.headers.get('Authorization')); 
    } 
} 

return super.request(url, options); 
}