前言
在 Web 开发中，实现用户鉴权是一个重要的问题。随着 Angular 的广泛应用，许多前端开发者也开始寻找一个轻量级的鉴权解决方案来支持 Angular 应用程序的用户认证和授权需求。@goodhum/gh-angular-auth 是一个新的 npm 包，为 Angular 应用程序提供了一个简单且易于使用的前端鉴权解决方案。
在本文中，我们将详细介绍 @goodhum/gh-angular-auth 包的使用方法，包括安装、配置、实现和使用，以及示例代码作为辅助说明，帮助 Angular 开发者更好地理解并使用该鉴权解决方案。
安装
在使用 @goodhum/gh-angular-auth 包之前，我们需要先安装它。可以通过 npm 包管理工具进行安装：
npm install @goodhum/gh-angular-auth --save
该命令将自动将 @goodhum/gh-angular-auth 包安装到您的项目目录下，并将其添加到您的项目依赖项中。
配置
安装完成后，接下来是配置以使该鉴权解决方案可以与您的 Angular 应用程序集成。首先，在 AppModule 或任何需要身份验证的子模块中导入 JwtModule：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------------
-----------
------------- ---------------
-------- -
-- ---
-------------------
------------ -------------------------
---------- --------
--------- --------------
---------------- ----------------------
---------- ---------------
------------ ---------------
---------------- -------------
--
--
---------- --------------
--
------ ----- --------- --JwtModule 要求传入一个配置对象，该对象包含以下属性：
secretOrKey：指定用于生成 jwt token 的密钥或密钥短语。algorithm：token 加密算法（默认为HS256）。loginURL：指定用于发送认证请求的 API 地址。refreshTokenURL：指定用于更新令牌的 API 地址。logoutURL：指定用于执行登出操作的 API 地址。storageName：指定 token 存储在浏览器中的存储区名。authRedirectURL：指定未经授权访问受限路由时，用户需要重定向到的登陆页面。
除此之外，我们还需要在 AppComponent 组件中注入身份验证服务：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------------------- - ---- --------------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ----- - --------- ------------------- ------------ ---------------------- -- -
该服务提供了所有身份验证相关的功能和方法。
实现和使用
在配置完成后，现在可以开始使用 @goodhum/gh-angular-auth 解决方案来实现用户鉴权。以下是一些常见的示例用例：
登录用户
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------------
------------
--------- ------------
--------- -
--------- ---------
----- ------------------------
------ --------------- ---------------------- -----------------------
------ --------------- ---------------------- --------------- -----------------------
------- ------------------ -----------
---- ------------------ ------------- ------- ---------- --------
-------
-
--
------ ----- -------------- -
--------- -------
--------- -------
----------- -------
------------------- ------------ ---------------------- --
---------- -
------------------------------------- --------------
-----------
------- -- ------------------ --------------
----- -- --------------- - -----
--
-
-在该示例中，我们创建了一个 LoginComponent 组件，它包含一个表单，以便用户输入其凭据（用户名和密码）。当用户在表单中提交凭据时，onSignIn 方法被调用，该方法使用 AuthenticationService 来进行用户鉴权。
访问受限的内容
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------------
------------
--------- ----------------
--------- -
---- --------------------------------------------- ----- -- ------ --- -------------
---- ----------------------------------------------- -------- -------------
-
--
------ ----- ------------------ -
------------------- ------------ ---------------------- --
-在该示例中，我们创建了一个 ProtectedComponent 组件，其中包含一些受限制的内容，只有经过身份验证的用户才能访问。该组件使用 AuthenticationService 来检查用户的身份验证状态，并相应地显示不同的内容。
总结
通过本文，我们详细介绍了 @goodhum/gh-angular-auth npm 包的使用方法，包括安装、配置、实现和使用。此外，我们还提供了一些示例代码来帮助 Angular 开发者更好地了解和使用该鉴权解决方案。希望本文能够对需要为其 Angular 应用程序实现可靠的身份验证方法的开发人员提供有用的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dda1e