在现代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中其他需要动态更新和同步访问的共享异步资源管理场景。
