在前端开发中，经常需要使用到 ajax 请求来获取数据，而有些请求需要认证才能够获取到数据。angular2-http-auth 是一款用于 Angular2 的 http 认证包，可以帮助我们实现认证功能。
安装
你可以使用 npm 从 NPM 安装 angular2-http-auth:
npm install angular2-http-auth --save
使用
在
app.module.ts中引入 HttpClientModule 和 HttpAuthModule-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ----------------------- ------ - -------------- - ---- --------------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - -------------- ----------------- ------------------------ -- ---------- --- ---------- -------------- -- ------ ----- --------- - -注意：一定要在 HttpAuthModule 的 forRoot() 函数中调用 HttpAuth.init()。
在组件中使用 HTTP
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---- - ---- ---------------- ------ - -------- - ---- --------------------- ------ - ---------- - ---- ------------------ ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- ----- ----- ------- --------- --------- -- --------------------- - ------------------------------------------------- --------------------- -- - ---------------------- -- ------- -- - ------------------- --- - ------------------- - --------------------------------------------------- --------------------- -- - ---------------------- -- ------- -- - ------------------- --- - -在上面的示例中，我们分别使用 Http 和 AuthHttp 进行了两个请求。Http 是 Angular 自带的 http 模块，而 AuthHttp 则是 angular2-http-auth 提供的 http 模块，它会帮我们在请求的 headers 中添加认证信息。
当我们使用 AuthHttp 的时候，angular2-http-auth 会自动处理生成 token 并发送请求的逻辑，我们不需要手动的去管理 token。
设置认证信息
-- -------------------- ---- ------- ------ - ---------- - ---- --------------------- ----- ---------- - - -------------- -- --------------- ------------------ --- --------- ---------------------------------- ---------- ----------------------------------- -------------- ------------- ---------- --- ----------------- ---------------- ------------- --- ---------------- ----------------------------------- -- -------------------------------------
在这里，我们可以配置一些全局的认证信息，例如全局的请求头、登录地址、token 名称等等。在调用 AuthConfig.setAuthConfig() 之后，我们就可以在整个应用中使用 AuthHttp 进行认证请求了。
指导意义
使用 angular2-http-auth 可以使我们集中精力于业务开发，而不需要过多的关注认证部分逻辑。除此之外，还能大幅度提高我们的开发效率和代码可读性。
示例代码
上面提到了一些示例代码，这里分享下完整的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------ - -------- - ---- ---------------------
------ - ---------- - ---- ------------------
------ - ---------- - ---- ---------------------
----- ---------- - -
-------------- -- --------------- ------------------ ---
--------- ----------------------------------
---------- -----------------------------------
-------------- -------------
---------- ---
----------------- ----------------
------------- ---
---------------- -----------------------------------
--
-------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----- ------- --------- --------- --
--------------------- -
-------------------------------------------------
--------------------- -- -
----------------------
-- ------- -- -
-------------------
---
-
------------------- -
---------------------------------------------------
--------------------- -- -
----------------------
-- ------- -- -
-------------------
---
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bf981e8991b448e5ac4