Voglio controllare tutte le mie risposte http da un posto. Ad esempio lo stato di autenticazione. Se la risposta dice che l'utente non è più autenticato, desidero reindirizzare o qualcos'altro. C'è un modo per farlo.Come scrivere l'intercettore http per AngularJS 2?
7
A
risposta
5
Eccoci
Creare un servizio del genere
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);
}
}
e includerlo in voi app.module.ts come questo
@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 {
}
non dovete apportare modifiche per il tuo altro servizio strega usa http
+0
Funziona per te? Ho versione 4.2.4 di Angular e la stessa soluzione ma l'intestazione non è stata aggiunta. Un errore in http.es5.js (funzione Http.prototype.get). Sembra che sia correlato a https://github.com/angular/angular/issues/19260 –
1
anche dalla versione 4.3 di angolare è possibile utilizzare HttpInterceptor
. Maggiori informazioni dalla documentazione ufficiale sono qui HttpInterceptor.
@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);
}
}
Si dovrebbe dare un'occhiata a questo documento https://github.com/angular/http/issues/80. Intercettori e trasformatori Http Angular2 sono molto discussi in questo momento. Se hai bisogno di reindirizzare un utente non autenticato, ti consiglierei di farlo da quel lato server (ad eccezione di SPA) – Antoine