在前端开发中，经常会涉及到用户认证和授权的问题，为了方便实现这些功能，我们可以使用 @vladimir31415/adal-angular5 这个 npm 包来管理用户身份认证信息。
什么是 @vladimir31415/adal-angular5
@vladimir31415/adal-angular5 是一个基于 Angular5 框架的 Azure Active Directory 身份认证包，它提供了简单易用的 API，方便前端开发者在 Angular5 中实现用户认证和授权的功能。
如何使用 @vladimir31415/adal-angular5
安装
在开始使用 @vladimir31415/adal-angular5 之前，需要先安装它。使用以下命令可以安装最新版本：
npm install @vladimir31415/adal-angular5
配置
在安装完 @vladimir31415/adal-angular5 后，还需要进行一些配置才能让它正常工作。可以通过设置 Adal5Service 的 config 属性来完成配置，例如：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------------------
----- ---------- - -
------- ---------------------------------------
--------- ---------------------------------------
------------ -----------------------
---------------------- -----------------------
---------- -
----------------------- --------------------------------------
--
-------------------------- ------
-------------- ----------------
--
-----------
------------- ---------------
-------- --------------- ------------------
---------- -
-
-------- -----------------
----------- -------------------------
----- ------------ -------------
--
-------------
-
-------- -----------------
----------- -------------------------
----- ------------ -------------
-
--
---------- --------------
--
------ ----- --------- -
------------------- ------------ ------------- -
----------------------------------
-
-在这里，我们给 Adal5Service 设置了一个包含如下属性的配置对象：
- tenant：Azure Active Directory 租户 ID
- clientId：Azure Active Directory 应用程序 ID
- redirectUri：登录后重定向到的 URL
- postLogoutRedirectUri：注销后重定向到的 URL
- endpoints：应用程序所依赖的 API 的 URL 和应用程序 ID
- navigateToLoginRequestUrl：是否在启动应用程序时自动导航到身份验证提示框
- cacheLocation：设置缓存位置
使用
配置好 @vladimir31415/adal-angular5 的配置之后，就可以开始使用它来管理用户身份认证信息了。例如，可以通过以下代码获取当前用户的信息：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------ -------- - -----
------------------- ------------ ------------- --
------ ---------- -
------------- - --------------------------
-
-在这里，我们使用 adalService.userInfo 属性来获取当前用户的信息。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- -------------------------------
----- ---------- - -
------- ---------------------------------------
--------- ---------------------------------------
------------ -----------------------
---------------------- -----------------------
---------- -
----------------------- --------------------------------------
--
-------------------------- ------
-------------- ----------------
--
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------ -------- - -----
------------------- ------------ ------------- -
----------------------------------
-
------ ---------- -
------------- - --------------------------
-
------ ------- -
-------------------------
-
------ -------- -
--------------------------
-
-总结
通过本文的介绍，我们了解了 @vladimir31415/adal-angular5 的基本使用方法和注意事项，掌握了如何在 Angular5 应用程序中实现用户身份认证和授权的功能。通过仔细阅读和练习，相信你已经能够熟练掌握 @vladimir31415/adal-angular5 的使用方法了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728181e8991b448e8b16