Как использовать HTTP Transfer State при использовании относительных URL

Question

Я пытаюсь реализовать встроенный TransferHttpCacheModule для устранения дублирования запросов. Я использую этот перехватчик в моем приложении:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authService = this.injector.get(AuthenticationService);
    const url = `${this.request ? this.request.protocol + '://' + this.request.get('host') : ''}${environment.baseBackendUrl}${req.url}`

    let headers = new HttpHeaders();

    if (this.request) {
      // Server side: forward the cookies
      const cookies = this.request.cookies;
      const cookiesArray = [];
      for (const name in cookies) {
        if (cookies.hasOwnProperty(name)) {
          cookiesArray.push(`${name}=${cookies[name]}`);
        }
      }
      headers = headers.append('Cookie', cookiesArray.join('; '));
    }

    headers = headers.append('Content-Type', 'application/json');

    const finalReq: HttpRequest<any> = req.clone({ url, headers });
    ...

Он включает относительные URL-адреса на стороне клиента и полные URL-адреса на стороне сервера, поскольку сервер не знает свой собственный URL-адрес.

Проблема в том, что TransferHttpCacheModule использует ключ на основе метода, URL-адреса и параметров, а URL-адреса сервера не совпадают с URL-адресами клиента.

Есть ли способ заставить TransferHttpCacheInterceptor выполнить перед моим собственным перехватчиком? Я хочу избежать использования полных URL-адресов на стороне клиента.

Answer 1

Вы можете разместить свой перехватчик внутри собственного модуля:

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyOwnInterceptor, multi: true }
  ]
})
export class MyOwnInterceptorModule {}

Затем вы можете разместить этот модуль под импортом TransferHttpCacheModule внутри вашего AppModule:

@NgModule({
  imports: [
    // ...
    TransferHttpCacheModule,
    MyOwnInterceptorModule
  ],
  // ...
})
export class AppModule {}

Таким образом, ваш перехватчик будет применен после TransferHttpCacheInterceptor, Хотя это кажется странным, потому что, насколько я знаю, сначала идет импорт, а затем провайдеры. Таким образом, вы можете переопределить поставщиков из импорта. Вы уверены, что не хотите это наоборот?

Answer 2

У меня была такая же проблема для угловой универсальной поддержки в angularspree

Я следовал этим методам:

=> Создайте TransferStateService, который предоставляет функции для установки и получения данных кэша.

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformBrowser } from '@angular/common';

/**
 * Keep caches (makeStateKey) into it in each `setCache` function call
 * @type {any[]}
 */
const transferStateCache: String[] = [];

@Injectable()
export class TransferStateService {
  constructor(private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object,
    // @Inject(APP_ID) private _appId: string
  ) {
  }

  /**
   * Set cache only when it's running on server
   * @param {string} key
   * @param data Data to store to cache
   */
  setCache(key: string, data: any) {
    if (!isPlatformBrowser(this.platformId)) {
      transferStateCache[key] = makeStateKey<any>(key);
      this.transferState.set(transferStateCache[key], data);
    }
  }


  /**
   * Returns stored cache only when it's running on browser
   * @param {string} key
   * @returns {any} cachedData
   */
  getCache(key: string): any {
    if (isPlatformBrowser(this.platformId)) {
      const cachedData: any = this.transferState['store'][key];
      /**
       * Delete the cache to request the data from network next time which is the
       * user's expected behavior
       */
      delete this.transferState['store'][key];
      return cachedData;
    }
  }
}

---

=> Создать TransferStateInterceptor для перехвата запроса на серверной платформе.

import { tap } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse
} from '@angular/common/http';
import { TransferStateService } from '../services/transfer-state.service';

@Injectable()
export class TransferStateInterceptor implements HttpInterceptor {
  constructor(private transferStateService: TransferStateService) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    /**
     * Skip this interceptor if the request method isn't GET.
     */
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    const cachedResponse = this.transferStateService.getCache(req.url);
    if (cachedResponse) {
      // A cached response exists which means server set it before. Serve it instead of forwarding
      // the request to the next handler.
      return of(new HttpResponse<any>({ body: cachedResponse }));
    }

    /**
     * No cached response exists. Go to the network, and cache
     * the response when it arrives.
     */
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.transferStateService.setCache(req.url, event.body);
        }
      })
    );
  }
}

=> Добавьте это в раздел провайдера в вашем модуле.

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

Answer 3

У меня была такая же проблема, и я решил ее, удалив хост в makeStateKey.

Ваш собственный HttpInterceptor

Вы можете изменить это

const key: StateKey<string> = makeStateKey<string>(request.url);

к этому

const key: StateKey<string> = makeStateKey<string>(request.url.split("/api").pop());