在前端开发过程中，我们经常需要进行用户身份验证，传统的做法是在客户端将用户信息存储在 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 命令即可：
npm install emiya-angular2-token --save
使用 emiya-angular2-token
下面让我们来看看如何使用 emiya-angular2-token 进行 token 鉴权。
初始化
首先，我们需要将 emiya-angular2-token 导入到我们的 Angular2 项目中，在 app.module.ts 中引入 emiya-angular2-token，方式如下：
-- -------------------- ---- -------
------ --------------- ---- ----------------------------
------ ---------- ---- ----------------
------ -------------- ---- ------------------
------ -------------- ---- ------------------
------ -------------- ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------------
--
---------- -
------------
--
---------- --------------
--
------ ----- --------- -
-在 app.module.ts 中我们引入模块：
import { NgModule } from '@angular/core';
import { EmiyaTokenModule } from 'emiya-angular2-token';
@NgModule({
imports: [EmitterService],
})
export class AppModule { }设置 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 的替代方案。
import { EmiyaTokenService, EmiyaConfigService } from 'emiya-angular2-token';
bootstrap(AppComponent, [
{ provide: EmiyaConfigService, useClass: EmiyaConfigNormal },
EmiyaTokenService,
]);在 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