1

我目前正在尝试XHRBackend为我的 angular2 应用程序创建自定义。我想使用 401 http 响应代码（未经授权）捕获所有 http 响应，以在登录页面上重定向用户。但我的问题来了：DI 无法Router在我的 custom-backend中加载。

@Injectable()
export class CustomXHRBackend extends XHRBackend {
    constructor(
        _browserXHR: BrowserXhr, 
        _baseResponseOptions: ResponseOptions, 
        _xsrfStrategy: XSRFStrategy,
        private router : Router) {
        super(_browserXHR, _baseResponseOptions, _xsrfStrategy);
        console.log(router); // --> undefined
    }

    createConnection(request: Request) {
        let xhrConnection = super.createConnection(request);
        xhrConnection.response = xhrConnection.response.catch((error, caugth) => {
            if(error.status === 401) {
                //Do stuff with the new router
                this.router.navigate(['/login']);
            }
            return Observable.throw(caugth);
        });
        return xhrConnection;
    }
}

似乎 DI 仍然使用 的元数据XHRBackend，因为定义了前 3 个参数。

我创建了一个 plunkr，演示了这个问题：http ://plnkr.co/edit/44imf9KpE06cIyQ395sg?p=preview

笔记：

plunkr 基于 angular2 路由器示例，不幸的是我没有足够的时间来创建一个更小的路由器。 重要的文件custom.backend.ts可能是main.ts.

有人知道，为什么会这样？

4

1 回答 1

2

为此，我会Http改为扩展类。这是一个示例：

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

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

并按如下所述进行注册：

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

编辑

我认为您需要使用以下方式提供明确的参数useFactory：

import {provide} from '@angular/core';
import {Router} from '@angular/router';
import { bootstrap }            from '@angular/platform-browser-dynamic';
import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import {HTTP_PROVIDERS, Http,RequestOptions, XHRBackend, XSRFStrategy, BrowserXhr} from '@angular/http';
import {CustomXHRBackend} from './custom.backend';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(XHRBackend, {
    useFactory: (browserXHR: BrowserXhr, requestOptions: RequestOptions, xsrfStrategy: XSRFStrategy, router: Router) => {
      return new CustomXHRBackend(browserXHR, requestOptions, xsrfStrategy, router);
    },
    deps: [BrowserXhr, RequestOptions, XSRFStrategy, Router]
  })
]);

看到这个 plunkr：http ://plnkr.co/edit/JK3q5nspZ434AeJJsUeJ?p=preview 。

于 2016-06-30T13:26:05.387 回答