Angular 中的 HttpContext 到底是什么？

你听说过 Angular 中的 HttpContext 吗？如果没有，那确实有这个东西。HttpContext 用于向 Angular 中的 HTTP 拦截器传递额外的元数据。

Angular 中的 HttpContext

HttpContext 用于存储可从 HTTP 拦截器访问的附加元数据。在此之前，没有基于每个请求配置拦截器的正确方法。此功能在Angular v12中引入。

如果您有需要以不同方式处理特定请求或覆盖 HTTP 拦截器中的某些逻辑的用例，那么这就是您需要使用的。

我最近才知道它，并且实际上开始在我最近的一个项目Libshare中使用它。

如何在 Angular 中使用 HttpContext？

让我们通过一个实际用例来了解如何使用 HttpContext。

我正在开发一个小型应用程序，用于管理和共享库。大多数 API 都需要身份验证，这意味着我们需要Authorization在所有 API 请求中添加标头。

对于像登录和注册这样的页面，我们不需要在 headers 中传递 token。让我们看看如何跳过某些 API，只在其他 API 请求中添加 Bearer token。

我们的使用方法非常简单。它分为两个部分：

1. 创建新的HttpContextToken

const IS_PUBLIC_API = new HttpContextToken<boolean>(() => false);

2. 调用时传递上下文http。

使用 发出请求时，您可以将与其他选项一起HttpClient传递。 我们创建一个 类的实例，并使用方法将值传递给我们上面创建的令牌。context
HttpContextset

getSomeData(slug: string) {
    return this.http
      .get(<URL>, {
        context: new HttpContext().set(IS_PUBLIC_API, true),
      })
  }

3. 检索拦截器内的数据。

我们现在可以通过访问以下内容从拦截器中检索上下文数据request.context：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.context.get(IS_PUBLIC_API)) {
      return next.handle(req);
    }
   // Add token to other requests
  }
}

你可以在这里查看实际用法：Libshare Repo

附加信息

HttpContext 由 Map 支持，因此具有如下方法：

class HttpContext {
  set<T>(token: HttpContextToken<T>, value: T): HttpContext
  get<T>(token: HttpContextToken<T>): T
  delete(token: HttpContextToken<unknown>): HttpContext
  has(token: HttpContextToken<unknown>): boolean
  keys(): IterableIterator<HttpContextToken<unknown>>
}

上下文也是类型安全的，这是一件好事。
另外，请记住，上下文是可变的，除非明确指定，否则在克隆的请求之间共享。

有很多方法可以证明这一点很有用，例如如果您只想缓存特定的请求，或者可能有条件地添加一些额外的标头。

文档：https://angular.io/api/common/http/HttpContext

与我联系

• 叽叽喳喳
• Github
• 领英
• Cardify - Github Readmes 的动态 SVG 图像

请在评论区留言，分享你的想法。
注意安全❤️