在 Angular2 中，实现身份验证是非常常见的需求。其中常用的包就是 ng2-auth。本篇文章将介绍如何使用 npm 包 ng2-auth 实现身份验证。
1. 安装
使用 npm 安装 ng2-auth：
npm install ng2-auth --save
2. 导入模块
在 app.module.ts 中导入 ng2-auth：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- -----------
-----------
-------- -
-----------------------
--------- --------------
---------- -------
--
-
--
------ ----- --------- - -上面的代码中，我们使用 Ng2AuthModule.forRoot 来设置登录 URL 和 token 名称。其中，loginUrl 表示登录的 URL，tokenName 表示 token 的名称。
3. 实现登录
在登录组件中，使用 AuthService 来实现登录：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------
------------
--------- --------
--------- -
------
------ ---------------------- --------------- --
------ ---------------------- --------------- --
------- ------------- -----------------------------
-------
-
--
------ ----- -------------- -
--------- -------
--------- -------
------------------- ------------ ------------ --
------- -
----- ----------- - -
--------- --------------
--------- -------------
--
-----------------------------------
-----------
---- -- ------------------ -- ----------
----- -- ------------------ -- ----------
--
-
-上面的代码中，我们首先在组件的构造函数中注入 AuthService，然后在 login 方法中调用 AuthService 的 login 方法来实现登录。在 subscribe 中，我们可以处理登录成功或失败后的逻辑。
4. 实现注销
在注销组件中，使用 AuthService 来实现注销：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------
------------
--------- ---------
--------- -
------- ------------------------------
-
--
------ ----- --------------- -
------------------- ------------ ------------ --
-------- -
-------------------------
-----------
---- -- ------------------ -- ----------
----- -- ------------------ -- ----------
--
-
-上面的代码中，我们在组件的构造函数中注入 AuthService，然后在 logout 方法中调用 AuthService 的 logout 方法来实现注销。在 subscribe 中，我们可以处理注销成功或失败后的逻辑。
至此，我们已经完成了使用 npm 包 ng2-auth 实现身份验证的教程。这个 npm 包的使用不仅能够提高前端的开发效率，而且能够极大地减少开发工作量，提高前端应用的安全性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557c681e8991b448d4ce7