前言
前端作为现代应用开发的一环，随着技术和需求的不断变化，在实际开发中遇到的问题也越来越复杂。其中，认证和授权是前端应用中必不可少的一环，为了解决这些问题，一些开源的前端鉴权库也应运而生。而 angular-auth-oidc-client-temp 就是其中一个比较成熟的 npm 包。
环境搭建
要使用 angular-auth-oidc-client-temp 首先需要在本地开发环境中安装 Angular CLI，并且新建一个 Angular 项目，进入项目根目录后，我们可以使用以下命令来安装 angular-auth-oidc-client-temp npm 包：
npm install angular-auth-oidc-client-temp --save
安装成功后，我们需要在 app.module.ts 中引入依赖：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ----------- ------------------ -------- - ---- --------------------------------
------ - --------------- - ---- -------------------------- -- ---------
-----------
------------- ------
-------- -
-----------------
--------------------
-- --------
------------ -
---------- ----------- -- --- --
------------- ---------------------------------- -- --------
-------------------- --------------------------------------------- -- --------
-------------- --------- ------- -- ----
------ ------- ------- ------- -- -----
---------- -------------------- -- ---- -----
------------- ----- -- ----
-------------- ----- -- --------
------------------ --------------- -- ----
---------- ---------------------- -- --- -----
------------------------- -------------------------
--
---
--
---------- -
-
-------- ------------------
--------- ----------------
------ ----- -- ------
--
------------------
--
---------- ---------------
--
------ ----- --------- --以上，我们完成了必要的依赖导入工作，并准备好可以用来配置鉴权服务的信息。根据你的应用需要修改 oidc_config 中的配置信息。
鉴权流程
接下来让我们来了解一下 angular-auth-oidc-client-temp 的鉴权流程，以便更好的了解如何应用它。
angular-auth-oidc-client 的鉴权流程大致分为以下几步：
- 初始化服务配置
angular-auth-oidc-client 服务初始化时，会构造一个 OidcSecurityService 服务和一个 AuthWellKnownEndpoints 必要证书。
- 用户鉴权
在业务代码执行过程中出现需要调用拥有访问权限接口的场景时，AuthInterceptor 拦截器会拦截该请求，检查是否存在有效的 Token。如果不存在，就会调用 OidcSecurityService 服务的 Authorize() 方法来进行用户鉴权。
- Token 获取
OidcSecurityService 服务会调用 AuthWellKnownEndpoints 模块来获取 OIDC 服务器的必要配置信息，并使用这些信息构造一个 OpenID Connect 认证请求，然后发送 OpenID Connect 请求，向 OIDC 服务器索取 ID Token 和 Access Token。成功获取到 Token 后，Token 会被存储在 Cookies 中，并且以事件的形式发出。
- Token 刷新
当 Token 即将过期时，AuthSilentRenew 模块会自动刷新 Token，保证用户在一定时间内不需要重新登录。
使用示例
以上，我们完成了环境搭建和鉴权流程的了解，接下来，我们来看看离线缓存策略的示例。
假设我们在 app.component.ts 中定义了一个 HttpClient 的请求方法：
getData() {
this.http.get('/api/data').subscribe((result: any) => {
console.log(result);
});
}考虑到有很多场景是 app.component.ts 会优先于 auth.component.ts 初始化，如果此时 Token 还未完成初始化，控制台会输出错误警告，我们可以通过 OidcSecurityService 的事件绑定来避免该错误，具体做法如下：
-- -------------------- ---- -------
------------------- ----- ----------- ------- -------------------- -------------------- -
----------------------------------------------------------- -- -
-- ----------------- -
---------------
-
---
-
--------- -
--------------------------------------------- ---- -- -
--------------------
---
-以上，我们在 app.component.ts 中完成了用户鉴权检查，控制台 Errors 不再提示，请根据具体业务需求功能扩展自己的拦截逻辑。
总结
本文已经向您展示了如何在 Angular 项目中使用 angular-auth-oidc-client-temp 完成鉴权功能，并简要介绍了它的鉴权流程。祝愿您使用本文提供的示例顺利完成您的业务开发。
参考资料：
- https://github.com/damienbod/angular-auth-oidc-client
- https://github.com/IdentityServer/IdentityServer4
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bee81e8991b448d9931