ejemplos - angular wikipedia

¿Cómo enviar "Cookie" en el encabezado de la solicitud para todas las solicitudes en Angular2?

Question

En realidad, nuestro backend autentica la solicitud usando Cookie en el encabezado de la solicitud. Sé que se negará si configuro un encabezado "Cookie". Entonces, ¿hay alguna manera de enviar una cookie al back-end?

Answer 1

En Angular5 puede escribir un Interceptor Http:

auth.interceptor.ts

import { Observable } from ''rxjs/Observable'';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ''@angular/common/http'';
import { Injectable } from ''@angular/core'';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      withCredentials: true
  });
  return next.handle(request);
  }
}

Y agregue a la matriz de proveedores de app.module

app.module.ts

import { AuthInterceptor } from ''./services/auth.interceptor'';
import { HTTP_INTERCEPTORS } from ''@angular/common/http'';
import { HttpClientModule } from ''@angular/common/http'';
imports: [
    BrowserModule,HttpClientModule,FormsModule
  ],

providers: [
    {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true,
    }
]

Answer 2

Supongo que hay una fase en la que le pides al servidor que te autentique. Después de esto (y si la autenticación es exitosa), el servidor devolverá una cookie en la respuesta. El navegador almacenará esta cookie y la enviará nuevamente para cada llamada.

Dicho esto, en el caso de solicitudes de dominio cruzado (CORS), debe establecer withCredentials of XHR en true para que el navegador agregue cookies en sus solicitudes.

Para habilitar esto con Angular2, necesitamos extender la clase BrowserXhr como se describe a continuación:

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = true;
    return <any>(xhr);
  }
}

y anular el proveedor BrowserXhr con el extendido:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

Vea estas preguntas para más detalles:

• Set-cookie en respuesta no está configurado para Angular2 post request
• xmlhttprequest y set-cookie & cookie

Editar (siguiendo el freaker del freaker )

Desde RC2, puede usar la propiedad withCredentials directamente dentro de la configuración de solicitud como se describe a continuación:

this.http.get(''http://...'', { withCredentials: true })

Editar (siguiendo el comentario [maxou])

Recuerde incluir withCredentials: true en cada solicitud .