[英]Angular2 Http Override inject Router
在带有旧组件路由器的Angular2 RC4应用程序中,我们覆盖了默认的Http类,以捕获http 401未经身份验证的请求,并将其重定向到登录页面。 这种重定向发生在Angular路由器上。
我们想立即更新到版本2.0.1,并使用新的路由器。 为此,我们还必须将新路由器注入到自定义Http覆盖类中。 编译成功,但是Angular无法运行,因为当应用程序启动时,它将尝试在加载第一个组件之前创建自定义http类。 在加载第一个组件之前,不再可能注入新路由器。
进行此操作的最佳方法是什么? 我们应该在实例化Http覆盖类之后手动注入Router吗? 那怎么办?
以下是我们的自定义Http类的代码,该代码可在RC4中与旧路由器一起使用。 更新到最终版本时,问题出在catchUnauthorized中,因为路由器无法再注入到此类中。
import {Injectable} from "@angular/core";
import {Http, Headers, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Request} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Router} from '@angular/router-deprecated';
@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private router: Router) {
super(backend, defaultOptions);
}
postJson(url: string, object: any, options: RequestOptionsArgs = {}): Observable<Response> {
var body = JSON.stringify(object);
if(!options.headers)
{
options.headers = new Headers();
}
options.headers.set("Content-Type", "application/json");
return this.post(url, body, options);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return super.request(url, options)
.catch(this.catchUnauthorized);
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return super.get(url, options)
.catch(this.catchUnauthorized);
}
post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return super.post(url, body, options)
.catch(this.catchUnauthorized);
}
put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return super.put(url, body, options)
.catch(this.catchUnauthorized);
}
delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return super.delete(url, options)
.catch(this.catchUnauthorized);
}
patch(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return super.patch(url, body, options)
.catch(this.catchUnauthorized);
}
head(url: string, options?: RequestOptionsArgs): Observable<Response> {
return super.head(url, options)
.catch(this.catchUnauthorized);
}
public catchUnauthorized = (error: Response) => {
if (error.status === 401 || error.status === 440) {
var currentInstruction = this.router.currentInstruction;
var instruction = this.router.generate(["/Login", { "session": "true", "returnUrl": currentInstruction.toLinkUrl() }]);
if (currentInstruction.urlPath != instruction.urlPath)
this.router.navigateByInstruction(instruction);
return Observable.throw('Sessie verlopen!');
}
if (error.status === 403) {
this.router.navigate(['/Error', { 'error': 'forbidden' }]);
return Observable.throw('Forbidden!');
}
return Observable.throw(error);
};
}
我有同样的问题。 尝试将“ Router”添加到“ deps”:
...
providers: [
{
provide: CustomHttp,
useFactory: (backend: XHRBackend, options: RequestOptions, route: Router) => {
return new CustomHttp(backend, options, route);
},
deps: [ XHRBackend, RequestOptions, Router ]
}
...
如果您想使用自定义类,但凡是从“ @ angular / http”导入的内容,提供程序都必须从“ @ angular / http”提供Http类,
import {Http} from '@angular/http';
import {CustomHttp} from 'my/custom/location';
function httpFactory(backend, options){
return new CustomHttp(backend, options);
}
{
provide: Http,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions]
}
您甚至可以将httpFactory方法放入与CustomHttp类相同的文件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.