在前端开发中，我们常常会使用到认证和授权的功能。而 ngx-adal-test 就是一个帮助我们快速建立 AAD 应用并且实现 Azure Active Directory (AAD) 集成的 npm 包。本文将详细介绍 ngx-adal-test 的使用方法，以及提供示例代码来指导读者快速上手。
准备工作
在开始使用 ngx-adal-test 之前，我们需要具备以下条件：
- 一个 Azure 订阅
- 在 Azure 中创建一个应用程序，并设置其权限
- 知道自己的租户 ID、client ID、client secret 以及重定向 URI
安装 ngx-adal-test
打开终端，输入以下命令：
npm install ngx-adal-test --save
设置配置项
在使用过程中我们需要设置一些配置项，我们可以通过创建一个 JavaScript 对象来设置这些参数。示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ ----- ----------- ---------- - -
------- -----------------
--------- -----------------
------------ ------------------------
---------------------- ------------------------------------
-------------- ---------------
-------------------------- ------
---------- -
------------------------------ ------------------------------
--
--需要注意的是，以上参数应全部替换为自己的信息。
应用 ngx-adal-test
在 app.module.ts 中引入必要的模块及服务：
-- -------------------- ---- ------- ------ - ----------- - ---- ---------------- ------ - ---------- - ---- ---------------- -- -- --------- - --------- --- ---------- - -- ----------- ---- ------------------- ----------- ------------ -
在 app.component.ts 中实例化 AdalService 服务：
import { AdalService } from 'ngx-adal-test';
constructor(
private adalService: AdalService
) {
this.adalService.init(adalConfig);
}登录与登出
在使用过程中需要调用登录和登出的方法，示例代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- ----------------
------------
------- ------------ -----------
- -
----------------------------------
-
------- -
-------------------------
-
-------- -
--------------------------
-保护路由
如果我们想通过登录状态来保护某些路由，我们可以使用 AuthGuard，示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- - ---- ------------------
------ - ----------- - ---- ----------------
-------------
------ ----- --------- ---------- ----------- -
------------------- ------------ ------------ --
------------- -
-- ----------------------------------------- -
------ -----
- ---- -
-------------------------
------ ------
-
-
-总结
到这里，我们已经学会了 ngx-adal-test 的使用，通过上面提供的示例代码，也能清晰的理解每个步骤。在之后的开发过程中，我们可以通过这个 npm 包来快速集成 AAD 单点登录和权限管理的功能。
参考
- ngx-adal-test GitHub: https://github.com/benbaran/ngx-adal-test
- Azure Active Directory 文档: https://docs.microsoft.com/en-us/azure/active-directory/manage-apps/what-is-single-sign-on
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbf81e8991b448e638d