Angular 中的路由器拦截器是一个非常有用和强大的功能，它允许我们在发送 HTTP 请求时拦截、修改、中断和继续它们。路由器拦截器不仅仅限于 HTTP 请求，它还可以拦截路由导航事件，从而允许我们在用户导航到某个路由前执行某些任务。
在本文中，我们将深入探讨 Angular 中的路由器拦截器，并介绍如何使用它们来完成常见的任务。本文内容详细、深入，希望读者可以从中获取学习和指导意义。
拦截器的基本概念
在 Angular 中，路由器拦截器实际上就是一个实现了 HttpInterceptor 接口的类。该接口定义了一个 intercept 方法，该方法接收两个参数：一个 HttpRequest 对象和一个 HttpHandler 对象。
HttpRequest 对象表示即将发送的 HTTP 请求，我们可以在 intercept 方法中修改它，例如添加或修改请求头或查询参数，或者将请求体设为一个特定的固定值。然后，我们可以将修改后的请求发送到服务器。
HttpHandler 对象允许我们进一步处理请求。它有一个 handle 方法，该方法接收一个 HttpRequest 对象，并返回一个 Observable<HttpEvent<any>>。我们可以在 handle 方法中订阅这个 Observable，以便在响应返回时执行某些操作。例如，我们可以处理响应，提取消息或错误，或者将响应流传递给下一个拦截器。
使用拦截器修改请求
让我们看一个简单的例子，演示如何使用拦截器来修改 HTTP 请求。为了让我们的示例更加逼真，我们将演示如何向请求中添加身份验证头来验证用户是否已经登录。首先，我们需要创建一个新的拦截器类：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
----------- ------
--
------ ----- --------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
----- --------- - ---------------------
----- ------- - -----------
-------- -------------------------------- ------- --------------
---
------ ---------------------
-
-在这个示例中，我们创建了一个名为 AuthInterceptor 的拦截器类，它实现了 HttpInterceptor 接口。在 intercept 方法中，我们首先从本地存储或其他位置获取身份验证令牌。然后，我们克隆原始请求，并使用 set 方法设置新的身份验证头，将身份验证令牌放在 'Bearer ' 前缀之后。最后，我们将修改后的请求传递给 next.handle 方法，让它继续进行。
现在，我们需要将这个拦截器添加到我们的头文件中：
------ - ----------------- - ---- -----------------------
------ - --------------- - ---- ---------------------
-----------
---------- --
-------- ------------------
--------- ----------------
------ ----
--
--
------ ----- --------- - -在这个例子中，我们使用 HTTP_INTERCEPTORS 常量来声明一个 AuthInterceptor 类型的提供程序，并将其添加到我们的模块提供程序中。我们通过设置 multi 标志来告诉 Angular，我们将添加多个拦截器，并让它合并提供程序。
现在我们已经创建了一个简单的拦截器，并将它添加到了我们的头文件中。当我们发送 HTTP 请求时，它将被拦截，并在其中添加身份验证头。
中断请求
有时，我们可能需要在某些条件满足时中断请求，例如用户未登录或请求数据无效时。在这种情况下，我们可以返回一个 Observable，它在 intercept 方法中完成，以便完全中断请求。让我们看一个简单的例子：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ ----------------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- ------------------------- ---------- --------------- -
-------------- ----------------- ----- ------------- --------------- -
-- ---------------------- -
------ -------------- ------------------- ------- ---- ----------- -------- -------- ----
-
------ ----------------------
------------------ ------------------ -- -
-- ------------- --- ---- -
----------------------
------ ------------------
-
------ ------------------
--
--
-
-在这个示例中，我们创建了一个名为 InvalidRequestInterceptor 的拦截器类。在 intercept 方法中，我们首先检查请求是否有效。如果请求无效，我们返回一个 Observable，它发出一个 HttpErrorResponse 对象，其中包含状态码 400 和错误消息“Invalid request”。
如果请求有效，我们使用 next.handle 方法发送请求，同时使用 catchError 操作符来捕获可能的错误。如果错误的状态码为 401，则我们重定向到登录页面，并返回一个 Observable，以便停止响应流并中断请求。否则，我们仅仅通过 throwError 操作符将错误传递给下一个拦截器或响应流。
拦截路由导航事件
拦截器不仅可以用于 HTTP 请求，还可以用于路由导航事件。通过这种方式，我们可以在用户导航到某个路由之前执行某些任务，例如检查用户是否已登录或是否具有足够的权限。
在 Angular 中，路由器拦截器使用 CanActivate 接口实现路由导航守卫。让我们看一个简单的例子：
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------- - ---- ------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------ ----------------------- ------ --------------------- ------------------ - -------- -
------ ------------------
------------ -- -
-- ---------- -
------ -----
- ---- -
------ ----------------------
-
--
--
-
-在这个示例中，我们创建了一个名为 AuthGuard 的路由器拦截器。在 canActivate 方法中，我们首先检查用户是否已登录。如果用户已登录，我们返回一个发出 true 的 Observable，表示用户已通过守卫。否则，我们重定向到登录页面，并返回一个发出 UrlTree 对象的 Observable，该对象表示重定向 URL。
总结
Angular 中的路由器拦截器是一个非常强大的功能，它为我们提供了灵活和可配置的方式来拦截和修改 HTTP 请求和路由导航事件。在本文中，我们深入探讨了路由器拦截器的基本概念，介绍了如何使用拦截器来完成常见任务，例如修改请求、中断请求和拦截路由导航事件。希望本文能对读者有所帮助，让他们更好地理解 Angular 中的路由器拦截器，并在实际项目中灵活使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653329387d4982a6eb69466e