如何为AngularJS2编写http拦截器？

我想从一个地方检查所有http响应。例如，身份验证状态。如果响应说用户不再经过身份验证，我想重定向或其他。有没有办法做到这一点。

我们开始吧

创建这样的服务

export const JWT_RESPONSE_HEADER = 'X-Auth-Token';

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

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    const request = super.request(url, this.appendAuthHeader(options));
    request.map(this.saveToken);
    return request;
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    const request = super.get(url, this.appendAuthHeader(options));
    request.map(this.saveToken);
    return request;
  }

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    const request = super.post(url, body, this.appendAuthHeader(options));
    request.map(this.saveToken);
    return request;
  }

  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    const request = super.put(url, body, this.appendAuthHeader(options));
    request.subscribe(this.saveToken);
    return request;
  }

  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    const request = super.delete(url, this.appendAuthHeader(options));
    request.map(this.saveToken);
    return request;
  }

  private appendAuthHeader(options?: RequestOptionsArgs): RequestOptionsArgs {
    let mergedOptions: RequestOptionsArgs;
    if (!options) {
      mergedOptions = { headers: new Headers() };
    } else {
      mergedOptions = options;
    }
    const token = localStorage.getItem(JWT_RESPONSE_HEADER);
    const isTokenSet = mergedOptions.headers.has('Authorization');
    if (token && !isTokenSet) mergedOptions.headers.append('Authorization', `Bearer ${token}`);
    return mergedOptions;
  }

  private saveToken(res: Response): void {
    const token = res.headers.get(JWT_RESPONSE_HEADER);
    if (token) localStorage.setItem(JWT_RESPONSE_HEADER, token);
  }
}

您不必对使用http的其他服务进行任何更改

---

同样，在Angular的4.3版中，您可以使用

HttpInterceptor

。这里有官方文件中的更多信息

@Injectable（）
导出类AuthInterceptor实现HttpInterceptor{
构造函数（公共身份验证：身份验证服务）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
request=request.clone({
setHeaders:{Authorization:`Bearer${this.auth.getToken（）}`}
});
下一步返回。处理（请求）；
}
}

您应该看看本文档。Angular2 Http拦截器和转换器目前正在进行大量讨论。如果您需要重定向未经身份验证的用户，我建议您这样做，服务器端（SPA除外）是否适合您？我有4.2.4版本的Angular和相同的解决方案，但没有添加标题。http.es5.js（http.prototype.get函数）中存在错误。看来这和

@NgModule({
    imports: [
        BrowserModule,
        ContentModule,
        routing,
        HttpModule
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    providers: [
        appRoutingProviders,
        LoginService,
        {
            provide: Http,
            useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new AuthHttp(backend, defaultOptions),
            deps: [XHRBackend, RequestOptions]
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
 constructor(public auth: AuthService) {}

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   request = request.clone({
     setHeaders: {Authorization: `Bearer ${this.auth.getToken()}`}
   });

   return next.handle(request);
  }
}