voliva / angular2-interceptors

79 stars 20 forks source link

how to user ServerURLInterceptor #11

Closed chunxueer closed 7 years ago

chunxueer commented 7 years ago

I have some services using HTTP, I want to modify the request before post, how do I use it? Thank you !

my code can't work .

AuthService.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AuthService {

  private headers = new Headers({'Content-Type': 'application/json'});
  constructor(private http: Http ) { }

  // 登陆
  private url_authLogin = 'auth/login';
  login(account:string,password:string):Promise<User> {
        console.log("登陆:"+account+","+password);
    return this.http.post(this.url_authLogin,JSON.stringify({account:account,password:password}))
               .toPromise()
               .then(response => response.json().data as User  )
               .catch(this.handleError); 
  } 
}

server.url.interceptor.ts

import { Interceptor, InterceptedRequest, InterceptedResponse } from 'ng2-interceptors';
export class ServerURLInterceptor implements Interceptor {
    public interceptBefore(request: InterceptedRequest): InterceptedRequest {
        request.url = "test"+request.url;
        console.log("intercept url:"+request.url);
        return request; 
    }

    public interceptAfter(response: InterceptedResponse): InterceptedResponse {
        return response;
    }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { InterceptorService  } from 'ng2-interceptors';
import { XHRBackend, RequestOptions } from '@angular/http';
import { ServerURLInterceptor } from './core/http/server.url.interceptor';

import { AuthService } from './core/auth/auth.service';

// import  ...

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule, 
    NgbModule.forRoot()
  ],
  declarations: [
    AppComponent // ....
  ],
  providers: [
     AuthService,ServerURLInterceptor,
      {
            provide: InterceptorService,
            useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, serverURLInterceptor: ServerURLInterceptor) => {
                let service = new InterceptorService(xhrBackend, requestOptions);
                service.addInterceptor(serverURLInterceptor); 
                return service;
            },
            deps: [XHRBackend, RequestOptions, ServerURLInterceptor] // Here you inject it into the useFactory function above
        }
],
  bootstrap: [AppComponent]
})
export class AppModule { }
chunxueer commented 7 years ago

Thanks , I do it ,it's working ...

app.module.ts

  providers: [
    AuthService,ServerURLInterceptor, 
    provideInterceptorService([
      ServerURLInterceptor
    ])

authservice.ts

 constructor(private http: InterceptorService ) { }