介绍
@4geit/ngx-auth-service是一个用于Angular应用程序中的身份验证和授权的npm包。它默认使用JWT令牌，可以轻松地添加身份验证和授权功能。它还提供了路由保护的功能，以确保只有已登录的用户可以访问受保护的路由。
安装
使用以下命令安装包：
npm install @4geit/ngx-auth-service
使用方法
- 引入模块
在你的模块中引入模块：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
-----------
-------- -
-----------------------
-------- ------------- -- -------------- -----
----------- ----------------------------- -- ---------
--
-
--- 在你的组件中使用服务
-- -------------------- ---- -------
------ - -------------- - ---- --------------------------
------------------- ----- --------------- - -
------- -
-------------------------- ---------
--------------- -- -
-- ----
-- ----- -- -
-- ----
---
-- 添加路由保护
你可以通过将 ngx-auth 指令添加到模板中，来保护你的路由。
在路由模块中：
import { NgxAuthGuard } from '@4geit/ngx-auth-service';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, canActivate: [NgxAuthGuard] },
{ path: 'profile', component: ProfileComponent, canActivate: [NgxAuthGuard] }
];在组件模板中：
<h1>Dashboard</h1> <p>这是一个受保护的路由，只有已登录的用户可以访问。</p> <div ngx-auth> <button (click)="logout()">登出</button> </div>
API
模块
NgxAuthModule.forRoot(config: Config)
这是模块中的唯一选项。
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
| jwtName | string | 是 | JWT令牌名称（COOKIE NAME） |
| authServer | string | 是 | 鉴权服务器的URL |
服务
NgxAuthService.signIn(username: string, password: string)
使用指定的凭据登录。
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
| username | string | 是 | 用户名 |
| password | string | 是 | 密码 |
该函数返回的是一个Observable对象，当登录成功时会发出一个数据对象，该数据对象包含JWT令牌，否则会发出一个错误对象。
NgxAuthService.signOut()
退出登录并清除JWT令牌。
该函数无需参数。
NgxAuthService.getToken()
返回当前存储的JWT令牌。
该函数无需参数，并返回一个字符串。
指令
NgxAuthDirective
该指令可以用于在模板中指定哪些内容是登录后才能访问的。
通过将ngx-auth指令添加到元素中，可以保护路由或者其他组件。
<div ngx-auth>
<!-- 只有登录后才能看到这里 -->
<p>欢迎回来，{{username}}</p>
</div>示例代码
以下是使用@4geit/ngx-auth-service实现的一个登录页示例：
login.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------------
------------
--------- ------------
--------- -
------
------ ----------- ---------------------- -----------------------
------ --------------- ---------------------- -----------------------
------- ------------- -----------------------------
-------
-
--
------ ----- -------------- -
--------- -------
--------- -------
------------------- ----- --------------- - -
------- -
------------------------------- --------------
--------------- -- -
-- ----
-- ----- -- -
-- ----
---
-
-login.component.html
<h1>Login</h1> <app-login></app-login>
app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------------
------------
--------- -----------
--------- -
---- ---------
-------------------------------
------
-
--
------ ----- ------------ -
------------------ ----- --------------- - -
-------- -
--------------------
-
-app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------- ------ - ---- ------------------
------ - -------------- ------------ - ---- --------------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- --------------------
------ - ------------- - ---- -------------------
------ - ------------------ - ---- ------------------------
------ - ---------------- - ---- ----------------------
----- ------- ------ - -
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
- ----- ------------ ---------- ------------------- ------------ -------------- --
- ----- ---------- ---------- ----------------- ------------ -------------- -
--
-----------
------------- -
-------------
--------------
-------------------
-----------------
--------------
--
-------- -
--------------
------------
-----------------------------
-----------------------
-------- -------------
----------- ----------------------------
--
--
---------- ---------------
---------- --------------
--
------ ----- --------- - -结论
使用@4geit/ngx-auth-service，可以轻松地添加身份验证和授权功能到你的Angular应用中，并提供路由保护的功能。它使用JWT令牌进行身份验证和授权，使整个过程更加简单和高效。希望这篇教程能够帮助你更好地使用该npm包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005603a81e8991b448de678