在现代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的变量，初始为null
let 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。这意味着下一次有请求需要令牌时，会再次尝试获取新令牌，从而避免了因一次失败导致所有后续请求
