渐进式 Web 应用（Progressive Web App，PWA）已经逐渐成为了 Web 开发的趋势之一。PWA 拥有了许多 Native 应用的优点，比如离线可访问、快速响应、可安装等，同时仍然保留了 Web 应用的优点，比如跨平台、动态更新等。本文将介绍如何在 PWA 中实现简单的鉴权方案。
为什么需要鉴权
在 Web 应用中，鉴权通常是对用户身份的认证，以此来控制用户对资源的访问权限。在 PWA 应用中，鉴权同样也是必不可少的一环。例如，在一个需要登录的 PWA 应用中，未授权用户访问受限的页面或资源时，应该会被带到登录页面进行登录。而如果没有进行鉴权，用户可以随意访问资源，这显然是不可取的。
实现鉴权方案
现在，我们将介绍如何在 PWA 应用中简单实现鉴权方案，以保证应用的安全性。
使用 Service Worker 缓存鉴权信息
Service Worker 是 PWA 应用中的核心技术之一，它可以帮助我们实现离线访问、缓存等功能。因此，我们可以在 Service Worker 中缓存用户的鉴权信息，以此来验证用户的身份。
首先，我们需要在 Service Worker 中添加对请求的拦截处理逻辑，来判断访问是否需要鉴权。如果需要鉴权，则从缓存中读取用户信息，来验证用户是否已经登录。如果未登录，则跳转到登录页面。
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------------ -
------ ---------
- ---- -
-- --------
-------------------------------------- -
------ ------------------------------------------------ -
------ ------------------------------------------------------ -
---------------- -
-- --------
------ ---------------------
- ---- -
-- -----------
------ ----------------------------
-
---
---
- ---- -
------ ---------------------
-
-
--
--
---在上述代码中，我们使用了 shouldAuthenticated 函数来判断是否需要鉴权。该函数可以根据请求路径、请求方法等信息来判断是否需要鉴权。
在鉴权成功后，我们需要将用户信息缓存到 Service Worker 中，以备下次使用。我们可以在登录成功后将用户信息写入到缓存中。
-- -------------------- ---- -------
-------- --------------- --------- -
-- ----
---
-- ------
------------------------------------------------ -
--- -------- - --- ---------------------------------- --------- ------ ---------
------------------------ ----------
---
-前端请求携带鉴权信息
在 Service Worker 中验证用户身份只是第一步，我们还需要让前端请求携带鉴权信息。这样，后端可以根据鉴权信息来判断当前用户是否有权限访问请求的资源。
在前端中，我们可以使用 Fetch API 来发送请求。我们通过拦截 Fetch API 的请求，在请求头中添加鉴权信息。在下面的示例代码中，我们将 username 和 token 添加到请求头中。
-- -------------------- ---- -------
------------------------- -
-------- -
---------------- ------ - - ------------- - --- - ------
-
--
------------------------ -
--------------- -
------ ----------------
- ---- -
-- ----
---
-
--
-------------------- -
-- ----
---
---刷新鉴权信息
由于用户的登录状态可能会过期，我们需要定期刷新鉴权信息。在 Service Worker 中，我们可以使用 setInterval 函数来定时刷新用户信息。
-- -------------------- ---- -------
---------------------- -
------------------------------------------------ -
------ -------------------------------------------------- -
--------------- -
------------------------ ------------------
-
---
---
-- -------- -- ------ -- --在上述代码中，我们使用了 fetch 函数来从后端获取新的用户信息。如果获取成功，则将新获取的信息缓存到 Service Worker 中。正如我们所看到的，Service Worker 可以帮助我们在后台执行定时任务，这是传统 Web 应用所不具备的功能之一。
总结
本文介绍了如何在 PWA 应用中实现简单的鉴权方案。我们在 Service Worker 中缓存用户信息来验证用户身份，并在前端请求中携带鉴权信息，以此来控制用户访问权限。此外，本文还介绍了如何刷新用户信息，以保证应用的安全性。
如果想了解更多关于 PWA 的内容，可以访问 PWA 中文文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483737348841e98942ddaf5