npm 包 fif-common-ng-2-token 使用教程

介绍

fif-common-ng-2-token 是一个针对 Angular2 或以上版本开发的 npm 包，它封装了处理 Token 相关操作的服务和组件，简化了开发者在使用 Token 时的操作流程。其中，Token 是一种用于验证身份的凭证，它是基于 OAuth2.0 协议的授权方式的产物。

安装

将 fif-common-ng-2-token 安装到你的项目中，可以通过以下命令：

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

使用方式

导入 TokenService

在你的 Angular2 项目中导入 TokenService，TokenService 用于获取 Token 值，可以在你的业务逻辑中调用：

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

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

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

使用 TokenPipe 显示 Token

TokenPipe 可用于显示当前 Token 值，其中要求必须将 TokenService 插入到组件的 providers 中：

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

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

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

通过 TokenInterceptor 添加 Token 到请求中

TokenInterceptor 可以将 Token 自动添加到每个请求的 Authorization 头中，实现了在每个请求中自动带上 Token 的功能：

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

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

在请求失败时处理 Token 错误

在请求中如果出现 Token 错误，可能需要重新获取 Token，TokenInterceptor 会将错误发送给 TokenErrorHandler 处理，需要开发者实现一个 TokenErrorHandler：

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

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

示例代码

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

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

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

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

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

结论

fif-common-ng-2-token 显著地简化了开发者在 Angular2 项目中使用 OAuth2.0 Token 的流程，同时保证了安全性、稳定性和可靠性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056dde81e8991b448e71fa

阅读全文

猜你喜欢

  • npm 包 add-recon 使用教程

    什么是 add-recon add-recon 是一个用于分析和优化项目中 JavaScript 代码的 npm 包，能够在代码中自动添加缺失的 use strict 语句、删除无用的 console...

    3 年前
  • npm 包 ci-pg 使用教程

    在前端开发中，我们常常需要使用数据库进行数据存储和管理。而 PostgreSQL 是一种强大的开源数据库，已经在各个领域得到广泛应用。ci-pg 是一款基于 Node.js 的 PostgreSQL ...

    3 年前
  • 安装和使用 npm 包 hapi-auth-fb

    在开发 Web 应用程序时，用户认证和授权是一个非常重要的问题。Facebook 提供了一种方便的方式，使用户可以使用他们的 Facebook 账户来登录和授权。hapi-auth-fb 是一个 np...

    3 年前
  • npm 包 jm-shuffler 使用教程

    简介 jm-shuffler 是一款用于前端开发的 JavaScript 库，它能够将一个数组进行乱序排序。它可以帮助我们在开发过程中快速地生成需要的随机列表，并为我们省去了手动编写乱序算法的麻烦。

    3 年前
  • npm包corpus-brown使用教程

    介绍 Npm包corpus-brown是一个基于Brown语料库的自然语言处理工具箱，其中包括了用于处理英语文本的数据集以及预处理工具。它是一个非常强大的工具，能够帮助前端开发者在应用程序开发和自然语...

    3 年前
  • npm 包 geezify 使用教程

    简介 npm 包 geezify 是一个将英文转化为地道的华裔英语的工具。该工具可用于网站界面调整、翻译学习和笑话制作等多种场景。 安装 使用 npm 安装 geezify： --- ------- ...

    3 年前
  • npm 包 easy-post-request-with-headers 使用教程

    前言 在前端开发中，我们经常需要与后端进行数据交互。对于一些简单的请求，我们可以使用原生的 JavaScript 的 XMLHttpRequest 或者 fetch API 来处理。

    3 年前
  • npm 包 ledgerco 使用教程

    在前端开发中，我们会涉及到与以太坊和其他区块链交互的需求。而如何在前端中使用区块链钱包进行转账或查询余额等操作，就需要使用到相应的npm包了。而本文将介绍如何使用 npm 包 ledgerco 进行相...

    3 年前
  • npm 包 switchname 使用教程

    在前端开发中，用到 npm 包是非常常见的。然而，有时候我们可能需要改变某个已有的 npm 包的名称，在项目中使用另一个自定义的名称。这时，npm 包 switchname 可以帮助我们快速完成这个任...

    3 年前
  • npm 包 babel-plugin-set-react-class-displayname 使用教程

    在 React 中，displayName 属性是一个非常有用的属性，它可以用来在调试和开发过程中更好地理解组件的层次结构。然而，如果你使用 ES6 类来定义组件，那么默认情况下组件的 display...

    3 年前
  • npm 包 cordova-plugin-firebase-crash-report 使用教程

    简介 cordova-plugin-firebase-crash-report 是一个 Cordova 插件，可以让开发者在移动应用中集成 Firebase Crash Reporting 功能。

    3 年前
  • npm 包 commit-stats 使用教程

    简介 commit-stats 是一个用于获取 Git 仓库 commit 记录统计信息的 npm 包。它可以用于分析开发者在项目中提交的代码变更情况，如提交数量、提交者、提交时间等，有助于我们更好地...

    3 年前
  • npm 包 tdunn-scripts 使用教程

    简介 tdunn-scripts 是一个基于 create-react-app 的 npm 包，它提供了一组定制化的脚本和配置文件，可以快速搭建一个 React 应用程序的开发环境。

    3 年前
  • npm 包 landa-react-mapbox 使用教程

    地图在 Web 开发中越来越常见，Mapbox 是一个流行的地图平台，它提供了灵活、高可定制化的地图 API。在 React 开发中，我们可以使用 landa-react-mapbox 这个 npm ...

    3 年前
  • npm 包 object-joinx 使用教程

    什么是 object-joinx? object-joinx 是一个能够将 JavaScript 中的对象进行合并的 npm 包。它提供了多种不同的合并方式，能够满足多种不同的合并需求。

    3 年前
  • npm 包 ag01-consult 使用教程

    简介 npm 包 ag01-consult 是一个前端工具包，它可以方便地对各种数据进行查询、筛选和排序等操作。本教程将介绍如何使用 ag01-consult。 安装 使用 npm 安装 ag01-c...

    3 年前
  • npm包 english-caverphonephonetic 使用教程

    英文单词的语音相似度是文本挖掘、自然语言处理等领域中常用的一种信息计算方式。为此，出现了一种称作“Caverphone”的算法，该算法能够将单词转换成一段可以比较的编码。

    3 年前
  • npm 包 ember-cli-bem 使用教程

    简介 ember-cli-bem 是一个基于 BEM（块/元素/修饰符）命名规范的 Ember.js 插件。它能够大幅减少开发人员的 CSS 代码量，并且在大型项目中提高可维护性。

    3 年前
  • 使用 automapper npm 包进行对象映射的教程

    automapper 是一个 npm 包，它可以方便地进行对象映射。该工具可以让你轻松地将一个对象的属性值映射到另一个对象上，以达到对象数据复制、数据映射等目的。它是一个开放源代码的项目，可以在 No...

    3 年前
  • npm 包 object-lastindexof 使用教程

    前言 在前端开发过程中，我们经常需要对数组或对象进行操作，从中获取或查找指定元素或属性。然而，JavaScript 原始方法中并没有提供特别方便的获取对象最后一个元素的方法，而这个问题可以很容易地通过...

    3 年前

相关推荐

    暂无文章