Solicitud de intercepción en Angular

¡Acostúmbrate a escribir juntos! Este es el sexto día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento

En el artículo anterior , Usando Api Proxy en Angular , tratamos el problema de la interfaz de depuración conjunta local y usamos el proxy.

Nuestras interfaces se escriben y procesan por separado. En los proyectos de desarrollo reales, hay muchas interfaces, algunas de las cuales requieren credenciales de inicio de sesión y otras no. Si una interfaz no se maneja correctamente, ¿podemos considerar interceptar y encapsular la solicitud?

Este artículo lo implementa.

diferenciar el ambiente

Necesitamos interceptar servicios en diferentes entornos. Al usar angular-clipara generar un proyecto, automáticamente ha distinguido el entorno, en el app/enviromentsdirectorio:

environments                                          
├── environment.prod.ts                  // 生产环境使用的配置
└── environment.ts                       // 开发环境使用的配置
复制代码

Modificamos el entorno de desarrollo de la siguiente manera:

// enviroment.ts

export const environment = {
  baseUrl: '',
  production: false
};
复制代码

baseUrlEs un campo que se agrega al frente de la solicitud cuando realiza una solicitud y apunta a la dirección que desea solicitar. No agregué nada, de hecho, fue equivalente a agregar http://localhost:4200el contenido de .

Por supuesto, el contenido que agregue aquí debe ajustarse para que coincida con el contenido agregado en su agente, y los lectores pueden pensar y verificar por sí mismos.

añadir interceptor

Generamos un servicio de http-interceptor.service.tsinterceptor de servicios y queremos que todas las solicitudes pasen por este servicio.

// http-interceptor.service.ts

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor, // 拦截器
  HttpRequest, // 请求
} from '@angular/common/http';

import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let secureReq: HttpRequest<any> = req;

    secureReq = secureReq.clone({
      url: environment.baseUrl + req.url
    });

    return next.handle(secureReq).pipe(
      tap(
        (response: any) => {
          // 处理响应的数据
          console.log(response)
        },
        (error: any) => {
          // 处理错误的数据
          console.log(error)
        }
      )
    )
  }
}
复制代码

Para que el interceptor surta efecto, tenemos app.module.tsque inyectarlo en:

// app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
// 拦截器服务
import { HttpInterceptorService } from './services/http-interceptor.service';

providers: [
  // 依赖注入
  {
    provide: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    multi: true,
  }
],
复制代码

verificar

Hasta ahora, hemos implementado con éxito el interceptor. Si ejecuta npm run dev, verá el siguiente mensaje en la consola:

Para verificar que se requieren credenciales de contenido para acceder al contenido, aquí intenté usar [post] https://jimmyarea.com/api/private/leave/messagela interfaz de y obtuve el siguiente error:

El backend ya procesó esta interfaz y requiere credenciales para operar, por lo que se informa directamente de un error 401.

Bueno, aquí viene la pregunta. 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;
// ...
// 使用 localhost 存储用户凭证，在请求头带上
if (window.localStorage.getItem('ut')) {
  let token = window.localStorage.getItem('ut') || ''
  secureReq = secureReq.clone({
    headers: 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 localstorageel valor de reinicio ; de lo contrario, se informará un error todo el localstoragetiempo.

【Fin】✅