npm 包 emiya-angular2-token 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在前端开发过程中，我们经常需要进行用户身份验证，传统的做法是在客户端将用户信息存储在 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

阅读全文

猜你喜欢

  • npm 包 energize 使用教程

    简介 energize 是一款基于 Node.js 平台的前端工具包。它提供了一些实用的工具函数和组件，方便前端工程师更高效地完成开发任务。 本文将介绍 energize 的使用方法，包括安装、配置以...

    4 年前
  • npm 包 energy-db 使用教程

    在前端开发中，我们经常会使用到第三方的工具和库，而 npm 是前端开发中最常用的包管理工具。在这里，我们将介绍一款名为 energy-db 的 npm 包，它是一个针对浏览器端设计的、轻量级的本地存储...

    4 年前
  • NPM 包 energy 使用教程

    在前端开发中，我们常常需要处理数学计算、数据格式化等场景。这时候，使用现成的库会大大提高我们的开发效率。NPM 是前端开发中最常用的包管理工具，10万+ 的包源库为开发人员提供了丰富的选择。

    4 年前
  • npm 包 envato-license-check 使用教程

    介绍 envato-license-check 是 npm 上一款用于检查 envato 市场上购买的授权证书的工具包。用于检查 js，css、图片、视频等文件是否具有正确的 envato 授权证书。

    4 年前
  • npm 包 envbang-node 使用教程

    简介 envbang-node 是一个使用 JavaScript 编写的 Node.js 应用程序的环境变量加载器。 Node.js 应用程序通常需要在部署前配置各种环境变量，如数据库地址、API 密...

    4 年前
  • npm 包 envc-assert 使用教程

    环境变量在前端开发中是非常常见的，特别是在应用部署阶段，它们包含了许多有用的信息，如应用的端口号或数据库的地址等等。不过，由于环境变量可以在应用启动后进行修改，所以它们的使用也具有一定的风险。

    4 年前
  • npm 包 enertalk-oauth 使用教程

    介绍 enertalk-oauth 是一个用于能源交互平台 OAuth 2.0 授权的 npm 包，您可以使用它获取终端用户的授权访问令牌，以访问其能源数据。 安装 要使用 enertalk-oaut...

    4 年前
  • npm 包 enny 使用教程

    enny 是一个自动生成随机数据的 npm 包，可以方便地用于前端开发中的各种测试、展示、示例等场景。该包提供了像生成随机数字、日期、文本、布尔值等各种类型的方法，可以满足大多数前端开发的需求。

    4 年前
  • npm 包 enoa-sparql-client 使用教程

    SPARQL 是用于查询图形数据的标准查询语言。enoa-sparql-client 是一个使用 SPARQL 查询语言的 Node.js 模块，它提供了一些方法来查询和处理结果。

    4 年前
  • npm 包 envd 使用教程

    介绍 envd 是一个可以在 Node.js 环境下读取 .env 文件中的变量并注入到环境变量中的库。在前端开发中，我们经常需要在不同的环境中进行调试和开发，例如开发、测试、预发布和正式发布环境等。

    4 年前
  • npm 包 envee 使用教程

    envee 是一个能够管理环境变量的 npm 包，在前端开发和部署中具有重要作用。本文将为大家详细介绍如何使用 envee 进行前端开发环境变量的管理。 What is Envee? envee 是一...

    4 年前
  • npm 包 envdefault 使用教程

    在前端开发中，我们经常会需要在代码中引用环境变量。但是不同的环境可能需要不同的配置参数，例如开发、测试和生产环境。这时候，我们就需要一种方便管理不同环境变量的方法，即使用 envdefault 这个 ...

    4 年前
  • npm 包 Envelop 使用教程

    简介 Envelop 是一个基于 GraphQL 的中间件层，可用于构建定制的 GraphQL 解决方案。Envelop 可以在请求到达 GraphQL API 之前和之后执行操作，以及在执行操作期间...

    4 年前
  • npm 包 envcheck 使用教程

    介绍 随着前端应用复杂度的不断增加，我们通常需要在不同环境下进行配置，而配置的过程很容易出错，例如忘记设置环境变量、环境变量名错误等等。此时，一个可靠的解决方案是使用 envcheck 这个 npm ...

    4 年前
  • npm 包 envconf 使用教程

    在前端应用程序中，处理环境变量是至关重要的。不同的环境所需要的配置可能是不同的，如开发、测试、预发布和生产环境。为了更好地管理环境变量，我们可以使用第三方 Node.js 包 envconf。

    4 年前
  • npm 包 epfl-exceptions 使用教程

    在开发前端应用程序的过程中，偶尔会遇到一些异常情况需要进行处理。而处理异常情况对于程序的健壮性和可靠性来说是至关重要的。为了便于处理异常情况，许多开发者都会使用一些诸如异常捕捉、异常返回等技术。

    4 年前
  • npm 包 epha-robot 使用教程

    Epha-robot 是一款基于 Node.js 的聊天机器人框架，支持多种聊天平台，包括 Slack、微信公众号、Facebook Messenger 等。本教程将介绍如何使用 epha-robot...

    4 年前
  • npm包epegjs使用教程

    epegjs是一个基于JavaScript的图片压缩库，能够通过缩小JPEG图像的尺寸和质量来有效地减小图片的大小。它使用了epeg C库，以JPEG格式压缩图片。

    4 年前
  • npm 包 envconfig 使用教程

    简介 envconfig 是一个 npm 包，用于简化 Node.js 应用程序的环境变量配置。它可以使配置管理更加轻松，更容易记忆和维护。 环境变量是存储在操作系统中的全局变量，我们可以在程序中访问...

    4 年前
  • npm 包 ephemera 使用教程

    前言 在现代 Web 应用中，组件化开发已经成为了一种非常流行的开发模式。而为了便于模块化开发，前端的构建工具也应运而生。npm 是目前最为流行的 Node.js 包管理工具，为前端开发中的依赖管理提...

    4 年前

相关推荐

    暂无文章