前言
在当今时代，Web 应用程序已经成为了日常生活中必不可少的一部分。对于拥有海量用户的 Web 应用程序来说，考虑到数据安全问题就更显得重要了。因此，前端开发人员需要为应用程序进行身份验证和授权。@juztcode/angular-auth 就是针对 Angular 应用程序设计的一款企业级身份验证和授权 npm 包。
安装
如果您使用 Angular CLI 创建的项目，则可以通过以下命令安装此 npm 包：
npm install @juztcode/angular-auth --save
如果您在使用其他的环境，请参考该环境的文档进行安装。
使用方法
安装后，您需要在 AppModule 中配置 @juztcode/angular-auth。您可以通过以下步骤完成安装：
- 首先，导入
AuthModule：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
-----------
-------- -
--------------------
--------- ---------
--------------- ----------------
----------- ---------
---------------- ------------
--
-
--
------ ----- --------- - -在 AuthModule.forRoot() 中，您需要传入四个配置项：
- loginUrl: 字符串类型。该配置项为您的登录页地址。
- authHeaderName: 字符串类型。该配置项为您的授权头部名称。
- authScheme: 字符串类型。该配置项为您的授权方案名称。
- tokenStorageKey: 字符串类型。该配置项为您的 Token 存储键名称。
这些配置项均为 @juztcode/angular-auth 必需的配置项，您必须根据您的应用程序要求进行正确配置。
- 其次，您需要在登录成功后通过
AuthService将 Token 存储到客户端：
-- -------------------- ---- -------
------------
--------- ------------
--------- -
----- -------------------------
------ ----------- ---------------------- -----------------------
------ --------------- ---------------------- -----------------------
------- ----------------------------
-------
-
--
------ ----- -------------- -
--------- -------
--------- -------
------------------- ------------ ------------ --
-------- ------ -
-------------------
---------------------- - ------------------
-- ----------
-
-在登录成功后，您需要将服务端返回的 Token 存储到客户端，否则您将无法进行授权操作。
- 最后，您可以在任何需要授权才能访问的路由上添加 @Auth() 装饰器：
import { Auth } from '@juztcode/angular-auth';
@Component({
selector: 'app-home',
template: '<h1>Welcome Home!</h1>'
})
@Auth()
export class HomeComponent { }当您添加了 @Auth() 装饰器后，当用户未登录时会自动跳转到您配置的登录地址，如果用户已经进行了登录，则会自动访问当前路由。
示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - --------- - ---- ------------------------- ------ - -------------- - ---- -------------------- ------ - ------------- - ---- ------------------- ----- ------- ------ - - - ----- -------- ---------- -------------- -- - ----- --- ---------- -------------- ------------ ----------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -------------------------
------------
--------- ------------
--------- -
----- -------------------------
------ ----------- ---------------------- -----------------------
------ --------------- ---------------------- -----------------------
------- ----------------------------
-------
-
--
------ ----- -------------- -
--------- -------
--------- -------
------------------- ------------ ------------ --
-------- ------ -
-------------------
---------------------- - ------------------
-- ----------
-
-import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: '<h1>Welcome Home!</h1>'
})
export class HomeComponent { }总结
在本文中，我们介绍了如何通过 @juztcode/angular-auth 对您的 Angular 应用程序进行身份验证和授权。通过本文的指导，您可以轻松地使用此 npm 包，为您的应用程序提供更加安全的保障。希望本文对您有所帮助，谢谢您的阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e244328