前端开发中的路由守卫是一个非常重要的概念。它可以监视并控制用户导航到应用程序的不同页面或视图。在 Angular 中，可以使用 RxJS 构建路由守卫，它可以帮助我们密切关注应用程序中的导航事件，以便更好地控制应用程序的访问。

RxJS 路由守卫

RxJS 是一个广泛应用于前端开发的响应式编程库。Angular 底层就使用了 RxJS 的响应式编程思想。使用 RxJS 路由守卫可以获得如下优点：

可以访问 Angular 路由事件，以便更好地控制应用程序的导航事件。
可以快速响应到路由要求或因导航事件而引起的任何错误或异常。
可以更好地处理权限控制和路由操作。

创建一个基本的路由守卫

下面我们将介绍如何使用 RxJS 来创建基本的路由守卫。

首先，我们需要自定义一个实现路由守卫的类，可以继承 CanActivate 接口，以确保路由守卫正常运行。路由守卫通常用于阻止未授权的访问。

-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------ - ---- ------------------
------ - ---------- - ---- -------

-------------
------ ----- --------- ---------- ----------- -
  ------------------- ------- ------- --

  -------------- ------------------- -
    -- -----------
    ------ --------- -- ----------
  -
-

在类中，声明了一个 AuthGuard 类，它继承了 CanActivate 接口，该接口强制要求实现一个 canActivate 方法，这个方法可以被用来控制路由导航。此外，我们还在构造函数中注入了路由器（Router）服务，以便进行路由导航的跳转。

接下来，我们可以在 canActivate 方法中添加自己需要的代码。

在路由中使用路由守卫

成功创建 AuthGuard 路由守卫后，我们还需要将其添加到应用以控制路由。需要在路由定义中注册 AuthGuard 路由守卫类，并使用 canActivate 属性来应用路由守卫。

-- -------------------- ---- -------
------ - ------- ------------ - ---- ------------------

------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - --------- - ---- ---------------

----- ------- ------ - -
  - ----- --- ---------- ------------- --
  - ----- -------- ---------- --------------- ------------ ----------- --
--

------ ----- ---------------- - -----------------------------

如上面代码所示，我们使用 canActivate 属性来注册 AuthGuard 路由守卫类，以控制访问/about 路径的访问权限。

到这里，我们已经掌握了如何使用 RxJS 构建 Angular 路由守卫的基本知识。

总结

使用 RxJS 编写路由守卫代码，可以更好地监视和控制 Angular 应用程序的导航事件。同时，使用路由守卫还可以更好地处理权限控制和路由操作。在实际开发过程中，我们应该灵活运用 RxJS 库来构建出更加高效、健壮的 Angular 应用程序。

示例代码

auth.guard.ts

-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------ - ---- ------------------
------ - ----------- -- - ---- -------

-------------
------ ----- --------- ---------- ----------- -
  ------------------- ------- ------- --

  -------------- ------------------- -
    -- -----------
    ------ --------- -- ----------
  -
-

app-routing.module.ts

-- -------------------- ---- -------
------ - ------- ------------ - ---- ------------------

------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - --------- - ---- ---------------

----- ------- ------ - -
  - ----- --- ---------- ------------- --
  - ----- -------- ---------- --------------- ------------ ----------- --
--

------ ----- ---------------- - -----------------------------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6461fea9968c7c53b0354316