npm 包 emiya-angular2-token 使用教程

阅读时长 9 分钟读完

在前端开发过程中,我们经常需要进行用户身份验证,传统的做法是在客户端将用户信息存储在 Cookie 或者 LocalStorage 中。这种做法虽然比较简单,但是存在很多安全问题,比如用户身份隐私泄露,token 被盗用等等。为了解决这些问题,现在一些前端框架也开始支持使用 token 进行身份验证,并提供相应的 npm 包来方便我们开发者使用。本篇文章介绍的是 emiya-angular2-token 这个 npm 包的使用方法。

emiya-angular2-token 简介

emiya-angular2-token 是一个为 Angular2 开发者提供的用于进行 token 鉴权的 npm 包。它支持使用 JWT 和 cookie 方式进行 token 鉴权,并提供了以下功能:

  • Token 保存方案:ORM 连接、Loopback 等等
  • Token 设置方案:header,url-query,cookie 等等
  • Token 身份验证:过期,无效,刷新等等

安装 emiya-angular2-token

使用 emiya-angular2-token 需要在你的 Angular2 项目中安装它。运行以下 npm 命令即可:

使用 emiya-angular2-token

下面让我们来看看如何使用 emiya-angular2-token 进行 token 鉴权。

初始化

首先,我们需要将 emiya-angular2-token 导入到我们的 Angular2 项目中,在 app.module.ts 中引入 emiya-angular2-token,方式如下:

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


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

在 app.module.ts 中我们引入模块:

设置 token 保存方式

接下来,我们需要设置 token 的保存方式。 在 app.module.ts 中,我们可以通过在 providers 中注册 EmiyaConstantService 来配置 token 的保存方式。例如:EmiyaConstantService.SAVE_TYPE.LOCAL_STORAGE

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

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

设置 token 获取方式

EmiyaTokenService.getJwtToken() 是用来获取 JWT Token 的方法,它自动从 HTTP 请求元数据中提取 token。 然而,你可能会希望使用查询参数或 cookie 而不是 HTTP 头来存储您的令牌。 为了使用其他引用传递,请在引导文件(bootstrap.ts)的 providers 数组中为 EmiyaTokenService 提供 EmiyaConfigService 的替代方案。

在 EmiyaConfigNormal 数据类中,你需要实现以下接口:

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

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

  -
-

鉴权

最后,我们需要进行鉴权。在我们想要进行鉴权的组件中,我们需要依赖注入 TokenService,并使用里面的 canActivate 相关方法来进行路由鉴权。

例如:

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

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

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

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

以上代码实现了基本的 token 鉴权,如果用户未登录就跳转到登录页面。

示例代码

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

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

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

在 dashboard 防护中添加 canActivate: [TokenService],它告诉路由器此路由是否可以激活。 如果 canActivate 方法返回 false,则保留当前 URL,因为路由器尝试重新导航到其他位置。 如果 canActivate 方法只是返回 true,则路由器可以导航到请求的组件。

总结

以上就是 emiya-angular2-token 的使用方法,我们可以通过这个 npm 包来简单实现 token 鉴权的功能。相比传统方式,使用 token 进行身份验证更安全和灵活,更值得我们开发者去使用和学习。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066e1ca563576b7b1ecc75

纠错
反馈