Angular2 路由：带用户角色参数的 canActivate 和 AuthGuard (JWT)

Angular2 是一个流行的前端框架，它提供了很多实用的功能来构建单页面应用程序（SPA）。其中之一是路由（routing）系统，它允许我们通过 URL 映射到组件，并根据需要激活或禁用路由。

在这篇文章中，我们将学习如何使用 Angular2 的路由机制和 AuthGuard 来管理用户身份验证和授权。特别地，我们将介绍如何使用 JWT 和用户角色参数来保护路由，并演示如何在模板中显示不同的 UI 元素和菜单选项，基于用户的角色权限。

AuthGuard 和 CanActivate

Angular2 中的 AuthGuard 是一个提供路由导航守卫的服务，它可以帮助我们在用户试图访问受保护的路由时进行身份验证和授权。AuthGuard 依赖于 CanActivate 接口，CanActivate 是一个用于授权的接口，必须在导航到路由时返回一个布尔值。如果返回 true，导航将继续；否则，导航将被取消并显示一个错误消息。

在下面的代码示例中，我们定义了一个 AuthGuard，它检查用户是否已经登录，并根据用户的角色参数来决定是否允许访问路由：

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

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

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

在上面的代码中，我们注入了一个 AuthService，在 canActivate 方法中检查当前用户是否已经登录，并检查该路由是否与用户的角色参数匹配。如果匹配，则返回 true；否则返回 false。

安装 JWT 模块

在上面的示例中，我们使用了一个 AuthService 来获取当前用户，并检查用户的 JWT 令牌和角色参数。那么，如何从 JWT 令牌中提取用户信息呢？

要解决这个问题，我们需要使用一个称为 jsonwebtoken 的第三方库。在 Angular2 中，可以通过 npm 包管理器来安装它，命令如下：

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

然后在服务中导入和使用它，例如：

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

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

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

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

在上面的代码中，我们使用了一个叫做 JwtHelperService 的服务来解码 JWT 令牌。该服务是由名为 @auth0/angular-jwt 的 npm 包提供的。

带有角色参数的路由

现在，我们已经知道如何使用 AuthGuard 和 JWT 来保护 Angular2 路由了。但是，如果您想基于用户的角色参数来控制 UI 元素或菜单项呢？

为此，我们可以通过路由数据（route data）参数来传递用户的角色信息。例如，我们可以定义一个路

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/27318