本文探讨了在Service Worker中高效管理周期性更新的认证令牌的策略。核心思想是利用Promise的不可变性，通过替换存储Promise的变量而非修改Promise本身，来确保网络请求在令牌刷新期间能等待并获取最新令牌。教程将详细介绍如何实现请求同步、错误处理及初始令牌获取，从而优化Service Worker的认证流程。
在现代Web应用中，Service Worker常被用于拦截和处理网络请求，从而实现离线能力、缓存管理和性能优化。当应用采用基于令牌的认证机制时，如何在Service Worker内部高效地管理这些认证令牌，特别是当令牌需要周期性刷新，并且在刷新期间所有新的网络请求都必须等待新令牌可用时，就成为了一个关键问题。
许多开发者可能会尝试寻找一种“可更新的Promise”或类似观察者模式的复杂机制来解决此问题。然而，Promise一旦被解析（fulfilled或rejected），其状态和值就不可更改。试图直接修改一个已存在的Promise是徒劳的。正确的策略是利用Promise的这种不可变性，通过巧妙地管理存储Promise的引用来达到目的。
核心策略：利用Promise引用替换实现请求同步
问题的核心在于，所有需要认证的请求都应该依赖于当前最新且有效的令牌。当令牌正在刷新时，后续请求应暂停并等待刷新完成；当刷新完成后，它们应使用新令牌继续。
解决方案的关键在于：
维护一个变量，例如 currentAuthTokenPromise，它始终指向一个代表“获取当前有效令牌”的Promise。当需要刷新令牌时（例如，通过定时器触发），创建一个新的Promise来执行令牌获取操作，并将 currentAuthTokenPromise 更新为指向这个新创建的Promise。所有需要令牌的网络请求都简单地 await currentAuthTokenPromise。
这样，无论 currentAuthTokenPromise 是一个已经解析的Promise（令牌已可用），还是一个仍在进行中的Promise（令牌正在刷新），await 关键字都会确保请求在令牌可用之前暂停执行。当 currentAuthTokenPromise 被新的Promise替换后，所有后续的 await 操作都将等待新的Promise。
实现细节与示例代码
为了实现这一机制，我们需要一个函数来负责获取新令牌，一个变量来存储当前的令牌Promise，以及一个定时器来触发周期性刷新。同时，为了增强健壮性，我们还需要考虑错误处理和初始令牌的获取。
// 模拟获取新认证令牌的函数// 实际应用中，这会是一个发起网络请求到认证服务器的异步操作async function fetchNewAuthToken() { console.log("Service Worker: 正在获取新的认证令牌..."); return new Promise((resolve, reject) => { // 模拟网络延迟和令牌生成 setTimeout(() => { const success = Math.random() > 0.1; // 模拟90%成功率 if (success) { const newToken = `Bearer_SW_${Date.now()}_${Math.random().toString(36).substring(2, 10)}`; console.log("Service Worker: 新令牌获取成功:", newToken); resolve(newToken); } else { console.error("Service Worker: 令牌获取失败！"); reject(new Error("Failed to fetch auth token")); } }, 1500); // 模拟1.5秒的网络请求 });}// 用于存储当前令牌Promise的变量，初始为nulllet currentAuthTokenPromise = null;/** * 获取或刷新认证令牌。 * 如果当前没有有效的令牌Promise，则发起获取新令牌的请求。 * 如果令牌获取失败，则重置 currentAuthTokenPromise 为 null，以便下次重试。 * @returns {Promise} 包含认证令牌的Promise */async function getOrRefreshAuthToken() { if (currentAuthTokenPromise === null) { console.log("Service Worker: 令牌Promise为空，发起首次或重试获取。"); currentAuthTokenPromise = fetchNewAuthToken().catch(error => { console.error("Service Worker: 令牌获取流程中捕获到错误:", error); currentAuthTokenPromise = null; // 获取失败，重置以便下次请求重试 throw error; // 重新抛出错误，让调用者感知 }); } return currentAuthTokenPromise;}// Service Worker启动时立即获取令牌getOrRefreshAuthToken();// 设置定时器，每隔15分钟刷新令牌// 注意：在实际Service Worker中，定时器可能因SW休眠而中断，// 更好的做法是结合 'sync' 事件或在每次请求时检查令牌有效期。const TOKEN_REFRESH_INTERVAL_MS = 15 * 60 * 1000; // 15分钟setInterval(() => { console.log("Service Worker: 达到刷新间隔，准备刷新令牌。"); currentAuthTokenPromise = null; // 清空当前Promise，强制下次调用 getOrRefreshAuthToken 时重新获取 getOrRefreshAuthToken();}, TOKEN_REFRESH_INTERVAL_MS);// 拦截所有网络请求的 fetch 事件self.addEventListener('fetch', event => { const { request } = event; // 假设只有特定路径的请求需要认证 if (request.url.includes('/api/') && !request.url.includes('/api/auth')) { // 避免认证请求本身也需要令牌 event.respondWith( (async () => { try { const token = await getOrRefreshAuthToken(); // 等待获取最新令牌 const headers = new Headers(request.headers); headers.set('Authorization', token); // 添加认证头 const authRequest = new Request(request, { headers }); console.log(`Service Worker: 使用令牌 '${token.substring(0, 20)}...' 发起请求到 ${request.url}`); return fetch(authRequest); // 发起带有认证头的新请求 } catch (error) { console.error(`Service Worker: 处理请求 ${request.url} 时令牌获取失败:`, error); // 可以返回一个错误响应，或者重定向到登录页 return new Response(JSON.stringify({ error: 'Authentication required or failed' }), { status: 401, headers: { 'Content-Type': 'application/json' } }); } })() ); }});
重要注意事项
错误处理与重试机制：如示例代码所示，getOrRefreshAuthToken 函数内部包含了错误处理逻辑。如果 fetchNewAuthToken 失败，它会捕获错误并将 currentAuthTokenPromise 重置为 null。这意味着下一次有请求需要令牌时，会再次尝试获取新令牌，从而避免了因一次失败导致所有后续请求
以上就是Service Worker中的认证令牌管理：实现请求等待与周期性刷新的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525812.html
微信扫一扫 
支付宝扫一扫 
