En el artículo anterior, utilizando el proxy Api en Angular, abordamos el problema de la interfaz de depuración conjunta local y el proxy utilizado.
Nuestras interfaces se escriben y procesan por separado. En proyectos de desarrollo reales, hay muchas interfaces, algunas de las cuales requieren credenciales de inicio de sesión y otras no. Si cada interfaz no se maneja adecuadamente, ¿podemos considerar interceptar y encapsular la solicitud? [Tutoriales relacionados recomendados: "Tutorial angular"]
Este artículo se implementará.
Para distinguir entre entornos
, necesitamos interceptar servicios en diferentes entornos. Al usar angular-cli para generar un proyecto, ha distinguido automáticamente los entornos en el directorio app/enviroments :
entornos.
├── entorno.prod.ts // Configuración utilizada en el entorno de producción └── entorno.ts // Configuración utilizada en el entorno de desarrollo
Modifiquemos el entorno de desarrollo:
// enviroment.ts
exportar entorno constante = {
URL base: '',
producción: falso
}; baseUrl es un campo agregado delante de la solicitud cuando realiza la solicitud. Apunta a la dirección que desea solicitar. No agregué nada. De hecho, fue equivalente a agregar el contenido de http://localhost:4200 .
Por supuesto, el contenido que agregue aquí debe ajustarse para que coincida con el contenido agregado en su proxy. Los lectores pueden pensar y verificar por sí mismos.
Generamos
el servicio interceptor http-interceptor.service.ts . La solicitud pasará por este servicio.
// http-interceptor.service.ts
importar {Inyectable} desde '@angular/core';
importar {
evento http,
HttpHandler,
HttpInterceptor, // Interceptor HttpRequest, // Solicitud} de '@angular/common/http';
importar {Observable} desde 'rxjs';
importar {toque} desde 'rxjs/operadores';
importar {entorno} desde 'src/environments/environment';
@Inyectable({
proporcionado en: 'raíz'
})
exportar clase HttpInterceptorService implementa HttpInterceptor {
constructor() { }
interceptar(req: HttpRequest<cualquiera>, siguiente: HttpHandler): Observable<HttpEvent<cualquier>> {
let SecureReq: HttpRequest<cualquier> = req;
SecureReq = SecureReq.clon ({
URL: entorno.baseUrl + solicitud.url
});
devolver siguiente.handle(secureReq).pipe(
grifo(
(respuesta: cualquiera) => {
// Procesa los datos de respuesta console.log(respuesta)
},
(error: cualquiera) => {
// Manejar datos de error console.log(error)
}
)
)
}
} Para que el interceptor surta efecto, debemos inyectarlo en app.module.ts :
// app.module.ts
importar {HttpClientModule, HTTP_INTERCEPTORS} desde '@angular/common/http';
// Importación del servicio interceptor { HttpInterceptorService } desde './services/http-interceptor.service';
proveedores: [
// Inyección de dependencia {
proporcionar: HTTP_INTERCEPTORS,
useClass: HttpInterceptorService,
múltiple: verdadero,
}
], Verificación
en este punto, hemos implementado exitosamente el interceptor. Si ejecuta npm run dev , verá el siguiente mensaje en la consola:
Para verificar si se requieren credenciales de contenido para acceder al contenido, aquí utilicé la interfaz [post] https://jimmyarea.com/api/private/leave/message para intentar y obtuve el siguiente error:
El backend ya ha procesado que esta interfaz requiere credenciales para funcionar, por lo que se informa directamente un error 401 .
Entonces aquí viene el problema. Después de iniciar sesión, ¿cómo debemos traer nuestras credenciales?
De la siguiente manera, modificamos el contenido del interceptor:
let SecureReq: HttpRequest<any> = req;
//...
// Utilice localhost para almacenar las credenciales del usuario en el encabezado de la solicitud if (window.localStorage.getItem('ut')) {
let token = ventana.localStorage.getItem('ut') ||
SecureReq = SecureReq.clon ({
encabezados: req.headers.set('token', token)
});
}
//... El período de validez de este certificado requiere que los lectores juzguen si el período de validez es válido al ingresar al sistema y luego consideren restablecer el valor de localstorage ; de lo contrario, siempre se informarán errores. Esto también es muy simple. la encapsulación del localstorage es conveniente para la operación Sí ~
[Fin]