在现代web应用中，特别是那些旨在通过trusted web activity (twa) 提供原生应用体验的场景，service worker在处理网络请求和离线能力方面扮演着关键角色。当涉及到认证授权时，管理动态更新的认证令牌（如bearer token）成为一个常见而重要的任务。应用程序需要service worker能够获取并持有这些令牌，将其应用于所有出站的网络请求。更进一步，这些令牌通常具有有限的生命周期，需要周期性地刷新。在此过程中，任何新的网络请求都必须等待最新的令牌可用后才能继续执行。
动态认证令牌管理策略
核心需求可以归纳为以下几点：
- 初始化获取与存储：Service Worker启动时，首次获取认证令牌并将其存储在内存中。
- 请求授权：所有需要认证的网络请求都应使用当前有效的令牌进行授权。
- 请求等待机制：当令牌正在被获取或刷新时，所有在此期间发起的网络请求应暂停，直到新的令牌可用后，再使用新令牌继续执行。
- 周期性刷新：令牌应按预设间隔（例如15分钟）自动刷新，每次刷新都应遵循上述请求等待机制。
最初，开发者可能会考虑使用某种“可更新的Promise”机制来实现，但Promise一旦被解决或拒绝，其状态和值就不可更改。因此，直接修改Promise对象本身是不可行的。
核心实现：Promise的妙用
解决上述问题的关键在于理解Promise的不可变性，并巧妙地利用引用替换的策略。我们不需要修改一个已存在的Promise，而是用一个新的Promise来替代旧的Promise。
具体而言，我们可以维护一个变量，该变量始终指向当前有效的（或正在获取中的）认证令牌的Promise。当需要刷新令牌时，我们只需调用获取令牌的异步函数，并将返回的新Promise赋值给这个变量。所有依赖令牌的网络请求，只需await这个变量所指向的Promise。无论这个Promise是已经解决的，还是仍在等待解决的，await都会确保请求在令牌可用时才继续执行，并且总是获取到最新的令牌值。
代码示例与解析
以下是实现这一策略的基本代码结构：
// 模拟异步获取认证令牌的函数
// 实际应用中，这里会发起网络请求到认证服务
async function fetchAuthToken() {
console.log('正在获取新的认证令牌...');
return new Promise(resolve => {
setTimeout(() => {
const newToken = `Bearer_TOKEN_${Date.now()}`; // 模拟生成新令牌
console.log('令牌已获取:', newToken);
resolve(newToken);
}, 1500); // 模拟网络延迟
});
}
// 定义一个变量来持有当前有效的（或正在获取中的）令牌Promise
let currentTokenPromise = null;
// 用于初始化和刷新令牌的函数
async function initializeOrRefreshToken() {
currentTokenPromise = fetchAuthToken(); // 将变量指向一个新的令牌Promise
try {
await currentTokenPromise; // 等待新令牌获取完成
console.log('令牌刷新成功。');
} catch (error) {
console.error('令牌刷新失败:', error);
// 可以在这里处理刷新失败的情况，例如重置currentTokenPromise为null
// 或者返回一个拒绝的Promise以通知后续请求
throw error; // 向上抛出错误
}
}
// 首次启动时获取令牌
initializeOrRefreshToken();
// 设置定时器，每隔15分钟刷新一次令牌
const TOKEN_REFRESH_INTERVAL = 15 * 60 * 1000; // 15分钟
setInterval(() => {
console.log('定时器触发，准备刷新令牌...');
initializeOrRefreshToken(); // 调用刷新函数
}, TOKEN_REFRESH_INTERVAL);
// 封装网络请求，确保使用最新的认证令牌
async function makeAuthenticatedRequest(url, options = {}) {
try {
console.log(`请求 ${url} 发起，等待令牌...`);
// 等待当前currentTokenPromise解析，确保获取到最新令牌
const token = await currentTokenPromise;
console.log(`使用令牌 ${token.substring(0, 20)}... 发送请求到 ${url}`);
const headers = {
...options.headers,
'Authorization': token
};
return fetch(url, { ...options, headers });
} catch (error) {
console.error(`向 ${url} 发送认证请求失败:`, error);
// 可以在这里进一步处理错误，例如返回一个自定义错误响应
throw error;
}
}
// 示例：在Service Worker的fetch事件中使用
/*
self.addEventListener('fetch', event => {
const request = event.request;
// 假设所有到 /api/ 的请求都需要认证
if (request.url.includes('/api/')) {
event.respondWith(
makeAuthenticatedRequest(request.url, {
method: request.method,
body: request.body,
headers: Object.fromEntries(request.headers.entries())
})
.catch(error => {
// 当认证或请求失败时，返回一个适当的错误响应
return new Response('Authentication required or network error', { status: 401 });
})
);
} else {
// 对于不需要认证的请求，直接转发
event.respondWith(fetch(request));
}
});
*/代码解析：
- fetchAuthToken()：一个异步函数，模拟从后端获取认证令牌。它返回一个Promise，在一段时间后解析为令牌字符串。
- currentTokenPromise：这是核心变量，它始终持有当前有效的或正在获取中的令牌Promise。
- initializeOrRefreshToken()：这个函数负责创建新的fetchAuthToken() Promise并将其赋值给currentTokenPromise。它还await了这个Promise，以便在内部处理令牌获取的成功或失败。
- setInterval()：定时器周期性地调用initializeOrRefreshToken()来刷新令牌。每次调用都会生成一个新的Promise并替换currentTokenPromise的引用。
- makeAuthenticatedRequest()：所有需要认证的网络请求都通过这个函数封装。关键在于 const token = await currentTokenPromise; 这一行。它会等待currentTokenPromise解析，无论是初始获取、还是周期性刷新，都能确保获取到最新的令牌。
健壮性与错误处理
上述基本实现虽然有效，但在实际生产环境中还需要考虑错误处理。如果fetchAuthToken()失败（例如，网络中断、认证服务器错误），currentTokenPromise将变为一个被拒绝的Promise。这意味着在下一个刷新周期到来之前，所有依赖currentTokenPromise的makeAuthenticatedRequest调用都将立即失败，从而导致应用长时间无法进行认证请求。
为了提高健壮性，我们可以引入以下改进：
- 失败后重试机制：当fetchAuthToken()失败时，不应让currentTokenPromise长时间处于拒绝状态。可以将其重置为null，并在下一次请求需要令牌时，触发一次立即重试。
- 动态刷新调度：只有当令牌成功获取后，才调度下一次的定时刷新。如果获取失败，则不调度，而是等待下一次请求触发重试。
以下是带有错误处理和重试机制的改进方案：
let currentTokenPromise = null;
let refreshTimeoutId = null; // 用于管理定时器ID
async function fetchAuthTokenRobust() {
console.log('正在尝试获取认证令牌...');
try {
const token = await fetchAuthToken(); // 调用原始的获取令牌函数
currentTokenPromise = Promise.resolve(token); // 成功则更新为已解决的Promise
scheduleNextRefresh(); // 成功后才安排下一次刷新
return token;
} catch (error) {
console.error('获取令牌失败:', error);
currentTokenPromise = null; // 失败则重置为null，等待下次请求触发重试
throw error; // 向上抛出错误
}
}
function scheduleNextRefresh() {
if (refreshTimeoutId) {
clearTimeout(refreshTimeoutId); // 清除任何现有的定时器
}
refreshTimeoutId = setTimeout(() => {
console.log('定时器触发，准备刷新令牌...');
fetchAuthTokenRobust(); // 重新获取令牌
}, TOKEN_REFRESH_INTERVAL);
}
// 首次启动时立即获取令牌
fetchAuthTokenRobust();
async function makeAuthenticatedRequestRobust(url, options = {}) {
// 如果currentTokenPromise为null，说明令牌尚未获取或已失效，需要重新获取
if (!currentTokenPromise) {
console.log('令牌不可用或已过期，尝试重新获取...');
try {
await fetchAuthTokenRobust(); // 强制获取新令牌，并等待其完成
} catch (error) {
console.error('重新获取令牌失败，无法发送认证请求。');
throw new Error('Authentication token unavailable.'); // 抛出明确错误
}
}
try {
const token = await currentTokenPromise; // 等待当前有效的tokenPromise解析
const headers = {
...options.headers,
'Authorization': token
};
return fetch(url, { ...options, headers });
} catch (error) {
console.error(`向 ${url} 发送认证请求失败 (令牌可能已失效或网络错误):`, error);
// 可以在这里进一步处理，例如重定向到登录页或返回一个特定的错误响应
throw error;
}
}改进点解析：
- fetchAuthTokenRobust()：这是一个增强版的令牌获取函数，它负责调用原始的fetchAuthToken，并根据结果更新currentTokenPromise。
- 成功时，它将currentTokenPromise设置为一个已解决的Promise（Promise.resolve(token)），并调度下一次刷新。
- 失败时，它将currentTokenPromise重置为null，以便下次请求时能触发重试。
- scheduleNextRefresh()：负责管理定时器，确保每次成功获取令牌后才安排下一次刷新。
- makeAuthenticatedRequestRobust()：在发送请求前，会检查currentTokenPromise是否为null。如果为null，则会强制调用fetchAuthTokenRobust()来尝试获取新令牌，从而实现按需重试。
总结
通过巧妙地利用JavaScript Promise的不可变性，并结合引用替换和适当的错误处理机制，我们可以在Service Worker中高效且健壮地管理动态认证令牌。这种模式确保了：
- 实时性：网络请求总是使用最新的认证令牌。
- 同步性：在令牌更新期间发起的请求会自动等待，避免使用过期或无效的令牌。
- 弹性：通过错误处理和重试机制，系统能更好地应对令牌获取失败的情况。
这种方法不仅适用于Service Worker，也可以推广到任何需要在异步环境中管理周期性更新共享资源的场景，为构建高性能、高可靠性的Web应用提供了坚实的基础。
