一、什么是 ng4-auth
ng4-auth 是前端 Angular4+ 应用程序身份验证和授权方案。它为应用程序提供了一个可配置的身份验证和授权 API。
它支持以下身份验证和授权功能：
- 基于 JWT 的身份验证
- 用户注册和登录页面
- 忘记密码，重置密码和更改密码页面
- 对管理员和普通用户的角色和权限支持
二、安装 ng4-auth
下面是安装 ng4-auth 的命令：
npm install ng4-auth --save
三、使用 ng4-auth
- 导入模块
首先，导入 ng4-auth 模块，例如：
-- -------------------- ---- -------
------ - ------------- - ---- -----------
-----------
-------- -
-----------------------
---------- -
------ --------------
--------- -----------------
---------------- -------------------------------
-------------- -----------------------
------- ---------------
--
---
--
---------- ---
--- 使用指令
在组件的模板中使用指令 (ng4Login, ng4Register, ng4RequestPassword, ng4ResetPassword) 调用 ng4-auth 的方法，例如：
<form ng4Login [class.ng4-auth-error]="loginError" (error)="onError($event)">
<label>E-mail</label>
<input type="email" [(ngModel)]="user.email" name="email">
<label>Password</label>
<input type="password" [(ngModel)]="user.password" name="password">
<button type="submit">Log In</button>
</form>-- -------------------- ---- -------
----- ----------- -------------------------------------- --------------------------
---------------------
------ ------------ ------------------------ -------------
-----------------------
------ --------------- --------------------------- ----------------
-------------- ----------------
------ --------------- ----------------------------- -----------------------
------- -------------------------------
-------<form ng4RequestPassword [class.ng4-auth-error]="requestPasswordError" (error)="onError($event)">
<label>E-mail</label>
<input type="email" [(ngModel)]="user.email" name="email">
<button type="submit">Reset Password</button>
</form><form ng4ResetPassword [class.ng4-auth-error]="resetPasswordError" (error)="onError($event)">
<input type="hidden" [(ngModel)]="user.resetPasswordToken" name="resetPasswordToken">
<label>Password</label>
<input type="password" [(ngModel)]="user.password" name="password">
<label>Confirm Password</label>
<input type="password" [(ngModel)]="confirmPassword" name="confirmPassword">
<button type="submit">Reset Password</button>
</form>四、总结
ng4-auth 提供了前端 Angular4+ 应用程序身份验证和授权的简便方式，支持基于 JWT 的身份验证、用户注册和登录页面、忘记密码、重置密码和更改密码页面等功能。理解和使用 ng4-auth 可以提高前端应用程序的开发效率和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600575c381e8991b448ea724