在前端开发中，我们经常需要使用跨域资源，如请求第三方 API 接口。为了确保安全，服务器需要验证请求的来源，从而需要使用一些认证授权机制。其中最常用的是基于 Cookie 或 Authorization Header 的认证。
然而大部分前端框架并没有默认支持这些认证机制，因此需要我们手动添加。在 Angular 中，我们可以使用 @angular/common/http 包来实现 HTTP 请求和响应。但是，这个包默认不包含发送请求时携带 Cookie 或 Authorization Header 的支持，需要我们手动添加。
这时，我们可以使用 angular-with-credentials 这个 npm 包来快速实现 Cookie 或 Authorization Header 的发送。在本文中，我们将介绍如何使用 angular-with-credentials 包，并给出详细的使用示例。
安装
要使用 angular-with-credentials，我们需要先安装它。打开终端，进入你的 Angular 项目所在的目录，然后执行以下命令：
npm install angular-with-credentials --save
这个命令会安装最新版本的 angular-with-credentials，并将它添加到项目的依赖中。
使用方法
安装完成后，我们需要在 Angular 的 HTTP 请求中使用 withCredentials() 函数来启用 Cookie 或 Authorization Header 的发送。
例如，我们可以创建一个 HttpService 类，并在这个类中封装一些 HTTP 请求方法。以下是一个简单的实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ----------- -
------- ------- - -----------------------
------------------- ----- ----------- - -
------ ------------- -------- --------------- -
----- --- - ------------ - ---------
----- ------- - --- -------------
-------------------- -------------------
-------------- -------------------
--------------------- ------- - - ------------------------------------
------ ------------------ - -------- -------- ---------------- ---- ---
-
------ -------------- ------- ----- ----- --------------- -
----- --- - ------------ - ---------
----- ------- - --- -------------
-------------------- -------------------
-------------- -------------------
--------------------- ------- - - ------------------------------------
------ ------------------- ----- - -------- -------- ---------------- ---- ---
-
-在上面的代码中，我们使用 withCredentials: true 来启用 Cookie 或 Authorization Header 的发送。请注意，在配置 headers 时，我们添加了 Authorization 头部，它将从本地存储中获取 auth_token 值作为 Bearer Token 传递给服务器。
示例
这里我们提供一个简单的示例，演示如何使用 angular-with-credentials 在 Angular 程序中发送带有 Cookie 或 Authorization Header 的 HTTP 请求。
假设我们有一个 HTTP 服务，可以从 API 中获取当前登录用户的信息。我们可以在 AppComponent 中使用这个服务，并将用户信息显示到页面上。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- ----------- --------------------
--
------ ----- ------------ -
------ --------- -------
------------------- ----- ------------ -
---------------------------------
----- -- -
------------- - -------------
--
------- -- -
-------------------- -------
-
--
-
-在上面的代码中，我们使用 HttpService 来发送 GET 请求，获取当前登录用户的信息，并将它们显示到页面上。
在 HttpService 中，我们添加了 withCredentials: true 来启用 Cookie 或 Authorization Header 的发送。在这个示例中，我们使用了基于 Bearer Token 的认证方式，这要求我们在每个请求中添加 Authorization 头部，将存储在本地的 auth_token 值作为 Token 进行传递。
到此为止，我们就成功地使用了 angular-with-credentials 包，在 Angular 程序中实现了 Cookie 或 Authorization Header 的支持。
总结
本文介绍了如何使用 angular-with-credentials 包来实现 Cookie 或 Authorization Header 的发送。我们首先安装了这个包，然后介绍了如何在 Angular 中使用 withCredentials() 函数来启用发送 Cookie 或 Authorization Header。最后，我们提供了一个示例，演示了如何使用 HttpService 类来发送支持 Cookie 或 Authorization Header 的 HTTP 请求。
希望这篇文章可以帮助大家更好地理解如何在 Angular 程序中实现 Cookie 或 Authorization Header 的支持，同时更好地应用 angular-with-credentials 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559de81e8991b448d760a