本文探讨了在Service Worker中高效管理动态认证令牌的策略。核心思想是利用Promise的不可变性，通过替换Promise引用而非修改Promise对象本身，实现令牌的周期性更新与网络请求的同步等待。文章详细阐述了实现机制，包括初始化、定时刷新、请求等待以及关键的错误处理方案，确保应用在令牌更新期间仍能稳定、高效地处理授权请求。
在现代web应用中，特别是那些利用service worker来增强离线能力或进行网络请求拦截（如渐进式web应用，twa）的场景，高效且安全地管理认证令牌至关重要。当这些令牌需要周期性刷新时，如何确保所有并发的网络请求都能可靠地使用最新、最有效的令牌，成为了一个复杂的同步挑战。简单地获取新令牌并不能保证所有挂起的请求都会等待新令牌；它们可能会使用过期或缺失的令牌，导致认证失败。
核心机制：利用Promise实现请求同步
在处理动态令牌时，一个常见的误区是试图去修改一个已经存在的Promise对象。然而，Promise一旦被resolve或reject，其状态和值便不可更改。要实现动态更新和请求同步，正确的策略并非修改Promise本身，而是通过替换存储Promise的变量来引用一个新的Promise。当令牌需要更新时，我们创建一个新的Promise来代表这次令牌获取操作，并将其赋值给原先的变量。所有后续或正在等待的请求，只需await这个变量，便能自动等待到最新的令牌值。
这种方法巧妙地利用了Promise的链式调用和异步等待特性：
当currentTokenPromise处于pending状态时（即正在获取新令牌），所有await currentTokenPromise的请求都会暂停执行，直到该Promise被resolve。当currentTokenPromise被resolve后，所有等待的请求都会立即获取到最新的令牌值并继续执行。当令牌需要刷新时，我们简单地将currentTokenPromise指向一个新的fetchAuthToken()返回的Promise，从而实现无缝的更新。
实现细节与示例
以下代码展示了如何在Service Worker中实现这一机制，包括令牌的初始化、定时刷新以及网络请求如何利用这个动态更新的令牌。
// 假设这是一个用于异步获取新认证令牌的函数async function fetchAuthToken() { console.log("正在获取新的认证令牌..."); return new Promise((resolve, reject) => { // 模拟网络请求和潜在的延迟 setTimeout(() => { const success = Math.random() > 0.1; // 模拟90%成功率 if (success) { const newToken = `auth_token_${Date.now()}`; // 生成一个模拟新令牌 console.log("认证令牌已获取:", newToken); resolve(newToken); } else { console.error("认证令牌获取失败！"); reject(new Error("Failed to fetch token")); } }, 1500); // 模拟网络延迟 });}// 存储当前认证令牌的Promise。// Service Worker启动时，首次获取令牌。let currentTokenPromise = fetchAuthToken();// 设置定时器，每隔15分钟刷新令牌const TOKEN_REFRESH_INTERVAL_MS = 15 * 60 * 1000; // 15分钟let tokenRefreshTimer = setInterval(() => { console.log("定时刷新令牌触发..."); // 关键：将currentTokenPromise替换为新的fetchAuthToken()返回的Promise currentTokenPromise = fetchAuthToken().catch(error => { console.error("定时刷新令牌失败:", error); // 刷新失败时，可以考虑将currentTokenPromise置为null或重新触发一次获取 // 具体的错误处理策略将在下一节讨论 return Promise.reject(error); // 继续传递错误 });}, TOKEN_REFRESH_INTERVAL_MS);// 网络请求函数，使用当前令牌进行授权async function makeAuthorizedRequest(url, options = {}) { try { const token = await currentTokenPromise; // 等待当前令牌Promise解析 console.log(`[${new Date().toLocaleTimeString()}] 使用令牌 ${token} 发送请求到 ${url}`); // 实际的fetch请求，将令牌添加到请求头 const response = await fetch(url, { ...options, headers: { ...options.headers, 'Authorization': `Bearer ${token}` } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response; } catch (error) { console.error(`[${new Date().toLocaleTimeString()}] 请求 ${url} 失败:`, error); // 根据实际情况处理错误，例如抛出、返回特定响应等 throw error; }}// 示例：在Service Worker的fetch事件中如何使用// self.addEventListener('fetch', event => {// const requestUrl = new URL(event.request.url);// // 假设只有特定的API路径需要授权// if (requestUrl.pathname.startsWith('/api/protected/')) {// event.respondWith(makeAuthorizedRequest(event.request.url, {// method: event.request.method,// body: event.request.body,// headers: event.request.headers// }));// } else {// // 对于不需要授权的请求，直接进行网络请求// event.respondWith(fetch(event.request));// }// });// 模拟首次加载后立即发起的请求// makeAuthorizedRequest("/api/protected/data1");// makeAuthorizedRequest("/api/protected/data2");// 模拟在令牌刷新期间发起的请求// setTimeout(() => {// makeAuthorizedRequest("/api/protected/data3");// }, TOKEN_REFRESH_INTERVAL_MS / 2); // 在刷新周期中间发起// 模拟刷新后立即发起请求// setTimeout(() => {// makeAuthorizedRequest("/api/protected/data4");// }, TOKEN_REFRESH_INTERVAL_MS + 500);
代码解析：
fetchAuthToken()：这是一个异步函数，负责从后端获取新的认证令牌。currentTokenPromise：一个关键变量，它始终持有代表“当前有效令牌”的Promise。当Service Worker启动时，它会通过调用fetchAuthToken()进行初始化。setInterval()：每隔预设时间（例如15分钟），它会再次调用fetchAuthToken()，并将返回的新Promise赋值给currentTokenPromise。这正是实现令牌动态更新的核心。makeAuthorizedRequest()：所有需要认证的网络请求都会通过此函数发送。它使用await currentTokenPromise来确保在发送请求之前，已经获取到最新的有效令牌。如果currentTokenPromise正在等待新令牌，makeAuthorizedRequest将自动暂停，直到新令牌可用。
健壮性与错误处理
上述机制虽然能有效同步请求，但并未完全考虑 fetchAuthToken() 自身可能失败的情况。如果 fetchAuthToken() 返回一个被拒绝（rejected）的Promise，那么 currentTokenPromise 将会永久保持拒绝状态，导致所有依赖它的网络请求都会失败，直到下一个定时刷新周期。为了增强系统的健壮性，我们需要引入更完善的错误处理策略：
失败后重置与按需重试：当 fetchAuthToken() 失败时，可以将 currentTokenPromise 设置为 null 或一个特殊的拒绝Promise。在 makeAuthorizedRequest 尝试获取令牌时，如果发现 currentTokenPromise 为 null 或已拒绝，则触发一次即时重试 fetchAuthToken()，并更新 currentTokenPromise。这样可以避免长时间的服务中断。
let currentTokenPromise = null;let tokenRefreshTimer = null;const TOKEN_REFRESH_INTERVAL_MS = 15 * 60 * 1000;async function getOrFetchToken() { if (!currentTokenPromise) { console.log("令牌Promise为空或已失效，尝试重新获取..."); currentTokenPromise = fetchAuthToken().catch(error => { console.error("令牌获取失败:", error); currentTokenPromise = null; // 失败后重置，以便下次请求时重试 if (tokenRefreshTimer) clearInterval(tokenRefreshTimer); // 停止旧的定时器 tokenRefreshTimer = null; throw error; // 继续抛出错误，让请求处理 }); // 首次成功获取或失败重试成功后，启动或重置定时器 currentTokenPromise.then(() => { if (tokenRefreshTimer) clearInterval(tokenRefreshTimer); tokenRefreshTimer = setInterval(() => { console.log("定时刷新令牌触发..."); currentTokenPromise = fetchAuthToken().catch(error => { console.error("定时刷新令牌失败:", error); currentTokenPromise = null; // 刷新失败也重置 if (tokenRefreshTimer) clearInterval(tokenRefreshTimer); tokenRefreshTimer = null; return Promise.reject(error); }); }, TOKEN_REFRESH_INTERVAL_MS); }); } return currentTokenPromise;}async function makeAuthorizedRequest(url, options = {}) { try { const token = await getOrFetchToken(); // 总是通过这个函数获取 console.log(`[${new Date().toLocaleTimeString()}] 使用令牌 ${token} 发送请求到 ${url}`); const response = await fetch(url, { ...options, headers: { ...options.headers, 'Authorization': `Bearer ${token}` } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response; } catch (error) { console.error(`[${new Date().toLocaleTimeString()}] 请求 ${url} 失败:`, error); throw error; }}// 初始化时调用一次，确保currentTokenPromise被设置并启动定时器getOrFetchToken();
这个改进版本确保了在令牌获取失败时，系统不会无限期地卡住，而是有机会在下一个请求到来时进行重试，并能动态地管理定时器。
指数退避重试： 对于更复杂的生产环境，可以考虑在 fetchAuthToken 内部或外部包装一个指数退避重试逻辑，以避免在后端服务暂时不可用时，Service Worker持续高频地尝试获取令牌，造成不必要的负载。
熔断机制： 当令牌获取连续失败达到一定次数后，可以触发熔断机制，暂时停止令牌刷新，并向主应用报告问题，直至问题解决或达到恢复条件。
Service Worker集成考量
在Service Worker环境中，上述逻辑通常会集成到 fetch 事件监听器中。当Service Worker拦截到一个需要授权的网络请求时，它会调用 makeAuthorizedRequest 函数来处理该请求，从而确保所有出站请求都携带最新的有效令牌。这种模式将认证逻辑与应用的核心业务逻辑解耦，提高了代码的可维护性和安全性。同时，Service Worker的生命周期管理也需要注意，确保这些异步操作在Service Worker激活期间能够正常运行。
总结
通过巧妙地利用JavaScript Promise的特性，我们可以在Service Worker中实现一套高效且健壮的动态认证令牌管理系统。关键在于理解Promise的不可变性，并采用替换Promise引用的方式来同步令牌的更新与网络请求。结合适当的错误处理和重试机制，可以确保即使在令牌刷新或获取失败的情况下，应用也能保持稳定运行，为用户提供流畅且安全的体验。这种模式不仅适用于认证令牌，也可推广到Service Worker中其他需要动态更新和同步访问的共享异步资源管理场景。
以上就是Service Worker认证令牌管理：异步更新与请求同步的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/32109.html
微信扫一扫 
支付宝扫一扫 
