相信大家都知道，Http 拦截器是 Angular 6 中最新的一个特性，它可以在 Http 请求或响应被发送或接收之前或之后进行一些操作，让我们可以对请求或响应进行一些控制和改变，以达到一些更优秀的应用场景。本文将介绍如何使用 Http 拦截器来添加 Token，以达到在请求中添加身份验证信息的目的。
1. 获取 Token
首先，我们需要获取 Token，这里以登录为例，假设我们的后端接口为 api/login，发送用户名和密码给后端，后端返回 Token。
示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
------ ------------------------
-------------
------ ----- ----------- -
------------------- ----- ----------- - -
--------------- ------- --------- -------- ------------------- -
------ -------------------------------- - --------- --------- --------- -------- --
------------- -- -
--- ----- - ---------------
-- ------- -
----------------------------------- ---------------- --------- --------- ------ ----- ----
------ -----
- ---- -
------ ------
-
---
-
--------- ---- -
---------------------------------------
-
-在这里，我们使用了 HttpClient 发送了一个 Post 请求，发送了用户名和密码，如果返回的数据中存在 Token，则将其保存在本地存储中。如果没有 Token，则认为登录失败。
2. 实现 Http 拦截器
现在，我们实现一个 Http 拦截器，以在每次请求时自动添加 Token。
示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------------ ---------- --------------- - ---- -----------------------
------ - ---------- - ---- ------------------
-------------
------ ----- -------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
--- ----------- - ------------------------------------------------
-- ------------ -- ------------------ -
------- - ---------------
----------- -
-------------- ------- ---------------------
-
---
-
------ ---------------------
-
-在这里，我们定义了一个名为 JwtInterceptor 的服务，并实现了 HttpInterceptor 接口。intercept 函数将被执行，每次 Http 请求都会经过它。在这里，我们首先通过本地存储获取 Token，然后将 Token 加入到请求头的 Authorization 中。
3. 注册 Http 拦截器
最后，在 app.module.ts 中注册 JwtInterceptor，将其添加到 providers 数组中。
示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- --------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- -
- -------- ------------------ --------- --------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- - -现在，我们就可以在每次发送 Http 请求时，自动添加 Token 以进行身份验证。
总结
在本文中，我们介绍了 Angular6 中如何使用 Http 拦截器来添加 Token，以达到在每次请求中自动添加身份验证信息的目的。通过使用 Http 拦截器，我们可以更加方便地进行身份验证，并提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b20e3badd4f0e0ffb3b507