介绍
@hub9/angular-oauth-client是一个基于Angular的OAuth2.0认证库，提供了一系列的组件和服务来帮助Angular开发者进行OAuth2.0认证，方便开发者集成OAuth2.0认证到他们的应用中。
安装
使用npm安装：
npm install @hub9/angular-oauth-client --save
使用
配置
首先，在你的 Angular 项目中导入 OAuthModule ：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------------
-----------
-------- -
---------------------
--------------- -
---------------- ----
-
--
-
--
------ ----- --------- - -注意sendAccessToken字段需要设置为true以使用资源服务器。
服务
OAuth服务是核心服务，提供了OAuth所需的方法，如登陆和登出并保持OAuth2.0 token。服务提供两种主要方法：
login()- 无参数调用login 将重定向到身份验证服务器。logOut()- 删除本地 token 并将用户从应用登录状态中注销。
在你的组件中注入OAuthService服务：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- -----------------------------
------------
--------- ------------
--------- -
------- --------------------------------
------- ----------------------------------
-
--
------ ----- -------------- -
--------------------- ------------- ------------- --
------- -
--------------------------
-
-------- -
---------------------------
-
-Guard
Guard服务用于保护路由页面，例如我们需要登陆后才能访问用户中心页面。OAuthGuard是一个预定义的Guard，在Angular中使用非常简单。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ------ - ---------- - ---- ----------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ----------------- ------------ ------------ - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- -----------------------------
------ - ------ - ---- ------------------
------------
--------- ------------
--------- -
------- --------------------------------
------- ----------------------------------
-
--
------ ----- -------------- -
------------
--------- ------------- -------------
------- ------- ------
- --
------- -
--------------------------
-
-------- -
---------------------------
----------------------------
-
--- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- -----------------------------
------------
--------- --------------
--------- -
----------- ---------
-
--
------ ----- ---------------- -
--------------------- ------------- ------------- --
--- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ------ - ---------- - ---- ----------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ----------------- ------------ ------------ - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
结论
@hub9/angular-oauth-client是一个方便易用的OAuth2.0认证库，在Angular项目中集成OAuth2.0认证更加方便，提高开发效率和安全性。
同时，Guard服务的使用也让我们的路由变得更加安全，只有认证之后才能够进行相应的操作。
值得一提的是，@hub9/angular-oauth-client还支持在LocalStorage存储token，避免了每次页面刷新都要重新认证的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bbf967216659e244143