在现代网站开发中，认证是至关重要的一部分。因此，有很多开发者使用 ng2-ui-auth-znk 完成认证流程。ng2-ui-auth-znk 是一个基于 Angular 的 npm 包，可以方便地完成认证相关的代码编写。在本文中，我们将详细介绍如何安装和使用 ng2-ui-auth-znk，同时提供一些示例代码来帮助读者更好地理解和学习。
一、安装 ng2-ui-auth-znk
首先，我们需要安装 ng2-ui-auth-znk。运行以下命令：
npm install ng2-ui-auth-znk --save
安装完成后，我们需要添加 ng2-ui-auth-znk 的模块到 Angular 中。打开 app.module.ts 文件并添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------------- - ---- ------------------
-----------
-------- -
--------------------------
---
--
---
--
------ ----- --------- - -这将使我们的应用程序拥有 ng2-ui-auth-znk 的功能。
二、使用 ng2-ui-auth-znk
使用 ng2-ui-auth-znk 的第一步是在应用程序的入口组件中引入它。以下示例演示如何在组件中使用 ng2-ui-auth-znk：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ------------------
------------
--------- -----------
--------- -
---- --------------------------------------
------- ---------------------- ------------
------
---- ---------------------------------------
------- --------------------- -----------
------
-
--
------ ----- ------------ -
------------------ ------------ ---------- - -
------- -
-----------------------------------------
------------ ------ ----- -- -------------------- ---
-
-------- -
-------------------------
------------ ------ ----- -- -------------------- ---
-
-在这个示例中，我们引入了 Ng2UiAuth 并将其添加到构造函数注入的公共属性中。我们使用 isAuthenticated() 方法检查用户是否登录，然后显示对应按钮。
当用户点击"Log in"按钮时，我们调用 authService 的 authenticate() 方法。在这个例子中，我们传递了一个字符串“provider”，这意味着我们将使用一个名称为“provider”的提供商进行认证。在这里，我们需要使用真实的授权提供商，例如 Google 或 Facebook。
当用户点击"Log out"按钮时，我们调用 authService 的 logout() 方法。
三、ng2-ui-auth-znk 的指导意义
ng2-ui-auth-znk 包提供了一个非常方便的方式来处理认证。它减轻了很多认证相关的繁琐工作，让开发者可以更专注地开发其它功能。同时，这个库也为新手提供了一个学习的机会，让他们能够更好地了解 Angular 库的开发流程。 通过实际的代码示例，我们可以更好地学习和理解 ng2-ui-auth-znk 中的各种功能。
综上所述，ng2-ui-auth-znk 必须掌握的 know-how 对于 Angular 开发者来说是非常重要的。 如果您还没有尝试过这个库，请尝试添加它并实现认证流程，这将提高您作为开发者的能力和技能的数量和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005682781e8991b448e4455