选择退出以防止缓存需要授权的 HTTP 请求

Question

我有带有SSR和水合作用的角度应用程序

这是我的例子

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(),
  ],
};

根据 Angular 中的 PR https://github.com/angular/angular/pull/55034

重大更改：默认情况下，我们现在阻止缓存需要授权的 HTTP 请求。要选择退出此行为，请使用 withHttpTransferCache 中的 includeRequestsWithAuthHeaders 选项。

示例：

withHttpTransferCache({
  includeRequestsWithAuthHeaders: true,
})

现在我不知道到底可以在哪里导入

withHttpTransferCache

我尝试了以下所有方法

import { withHttpTransferCache } from '@angular/common/http';
import { withHttpTransferCache } from '@angular/platform-browser';
import { withHttpTransferCache } from '@angular/core';

但我总是收到错误

TS2305: Module "@angular/core" has no exported member withHttpTransferCache

通常的自动导入对我不起作用

Answer 1

我认为提供程序已被删除，而是您在

provideClientHydration

内有一个配置传输缓存对象，使用过滤器选项来过滤与身份验证相关的路由！

您也可以尝试

我们可以使用提供者

transferCache

 来自定义 

withHttpTransferCacheOptions，它具有一个具有以下属性的输入对象

HttpTransferCacheOptions

。

type HttpTransferCacheOptions = {
    includeHeaders?: string[];
    filter?: (req: HttpRequest<unknown>) => boolean;
    includePostRequests?: boolean;
};

所以我们可以使用

filter

属性来过滤掉我们想要过滤的路由

Angular Github 代码

/**
 * Options to configure how TransferCache should be used to cache requests made via HttpClient.
 *
 * @param includeHeaders Specifies which headers should be included into cached responses. No
 *     headers are included by default.
 * @param filter A function that receives a request as an argument and returns a boolean to indicate
 *     whether a request should be included into the cache.
 * @param includePostRequests Enables caching for POST requests. By default, only GET and HEAD
 *     requests are cached. This option can be enabled if POST requests are used to retrieve data
 *     (for example using GraphQL).
 * @param includeRequestsWithAuthHeaders Enables caching of requests containing either `Authorization`
 *     or `Proxy-Authorization` headers. By default, these requests are excluded from caching.
 *
 * @publicApi
 */
export type HttpTransferCacheOptions = {
  includeHeaders?: string[];
  filter?: (req: HttpRequest<unknown>) => boolean;
  includePostRequests?: boolean;
  includeRequestsWithAuthHeaders?: boolean;
};

最终代码：

...
provideClientHydration(
    withHttpTransferCache({
        filter: req => !req.url.startsWith('https://internal')
    })
);
...