Service Worker中令牌管理的挑战
在现代web应用中，service worker常被用于拦截和处理网络请求，实现离线缓存、推送通知等功能。当应用依赖于认证令牌进行api授权时，service worker也成为一个理想的令牌管理场所。然而，令牌通常具有有效期，需要周期性地刷新。这就带来了一个挑战：如何在service worker中存储和更新令牌，并确保在令牌更新期间，所有新的网络请求都能等待新令牌的生成，而非使用过期或正在更新的旧令牌。
核心需求可以总结为：
- Service Worker启动时获取并存储初始令牌。
- 所有网络请求使用当前有效的令牌进行授权。
- 令牌周期性更新（例如每15分钟）。
- 在令牌更新过程中，所有新发起的网络请求必须等待新令牌可用后才能继续执行。
直接修改一个已解决（resolved）或已拒绝（rejected）的Promise是不可能的，因为Promise一旦状态确定，其值便不可更改。因此，我们需要一种机制，能够让网络请求始终引用到“当前最新”的令牌Promise。
解决方案：可变Promise变量
解决此问题的关键在于不尝试修改Promise对象本身，而是替换存储Promise的变量。我们可以维护一个变量，它始终指向当前“代表令牌状态”的Promise。当令牌需要更新时，我们生成一个新的Promise来表示令牌的获取过程，并用这个新Promise替换掉旧变量中的Promise。
这样，任何需要令牌的网络请求都可以通过await这个变量所指向的Promise来确保获取到最新的令牌值。如果Promise已经解决，请求会立即获取令牌；如果Promise仍在挂起，请求会等待直到令牌获取完成。
实现机制与代码示例
以下是基于上述思路的实现示例：
// 模拟获取令牌的异步函数
async function fetchAuthToken() {
console.log('正在获取新的认证令牌...');
// 模拟网络请求和令牌生成，例如调用后端API
const response = await fetch('/api/get-new-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ /* payload for token request */ })
});
if (!response.ok) {
throw new Error(`获取令牌失败: ${response.statusText}`);
}
const data = await response.json();
const newToken = data.token; // 假设API返回的JSON中包含token字段
console.log('成功获取令牌:', newToken.substring(0, 10) + '...'); // 隐藏部分令牌
return newToken;
}
// 存储当前令牌Promise的变量
let currentTokenPromise = null;
// 初始化令牌获取和定时更新
async function initializeTokenManagement() {
// 首次获取令牌
currentTokenPromise = fetchAuthToken();
// 设置定时器，每15分钟更新一次令牌
setInterval(() => {
console.log('定时器触发：准备更新令牌...');
currentTokenPromise = fetchAuthToken(); // 用新的Promise替换旧的
}, 15 * 60 * 1000); // 15分钟
}
// 在Service Worker启动时调用初始化函数
// self.addEventListener('install', event => {
// event.waitUntil(initializeTokenManagement());
// });
// 或者在首次需要令牌时调用
// if (!currentTokenPromise) {
// initializeTokenManagement();
// }
// 封装网络请求的函数，它会等待令牌可用
async function authorizedRequest(url, options = {}) {
try {
// 确保令牌已加载或正在加载中
if (!currentTokenPromise) {
// 如果Service Worker启动后尚未初始化令牌管理，则在此处触发
// 或者根据实际应用逻辑，确保initializeTokenManagement已在合适时机调用
console.warn("令牌管理尚未初始化，尝试立即初始化...");
await initializeTokenManagement(); // 确保令牌管理被触发
}
const token = await currentTokenPromise; // 等待当前令牌Promise解决
console.log('使用令牌发起请求:', url);
// 将令牌添加到请求头
const authHeaders = {
...options.headers,
'Authorization': `Bearer ${token}`
};
return fetch(url, { ...options, headers: authHeaders });
} catch (error) {
console.error('授权请求失败:', error);
// 可以在此处添加错误处理逻辑，例如重试、通知用户等
throw error;
}
}
// 示例：如何在Service Worker的fetch事件中使用
self.addEventListener('fetch', event => {
const request = event.request;
// 假设只有特定的API请求需要授权
if (request.url.startsWith('https://your-api-domain.com/')) {
event.respondWith(authorizedRequest(request.url, {
method: request.method,
headers: request.headers,
body: request.body,
// 更多请求选项...
}));
}
});
// 在Service Worker激活时确保令牌管理已启动
self.addEventListener('activate', event => {
event.waitUntil(initializeTokenManagement());
});代码解释
- fetchAuthToken(): 这是一个异步函数，负责实际向后端API请求新的认证令牌。它返回一个Promise，该Promise在令牌成功获取时解决，在失败时拒绝。
- currentTokenPromise: 这是一个全局变量，它始终持有当前有效的或正在获取中的令牌Promise。
-
initializeTokenManagement():
- 在Service Worker启动或激活时调用，首次获取令牌并将其Promise赋值给currentTokenPromise。
- 设置setInterval定时器，每隔15分钟（或指定间隔）调用fetchAuthToken()，并将返回的新Promise赋值给currentTokenPromise。这样，currentTokenPromise总是指向最新的令牌获取过程。
-
authorizedRequest():
- 这个异步函数是所有需要认证的网络请求的入口。
- const token = await currentTokenPromise; 是核心。当这个代码执行时：
- 如果currentTokenPromise已经解决（即令牌已获取），token会立即获得令牌值。
- 如果currentTokenPromise仍在挂起（即令牌正在获取中），请求会暂停，直到currentTokenPromise解决并获取到新令牌。
- 获取到令牌后，将其添加到请求头中，然后发起实际的fetch请求。
错误处理与优化考量
上述方案在令牌更新和请求同步方面表现良好，但仍需考虑以下几点以增强其健壮性：
-
令牌获取失败处理: 如果fetchAuthToken()失败（例如网络问题或API错误），currentTokenPromise将变为一个被拒绝的Promise。这意味着在接下来的15分钟内，所有依赖currentTokenPromise的authorizedRequest都会立即失败。
- 改进方案: 当fetchAuthToken()失败时，可以将currentTokenPromise重置为null。在authorizedRequest中，如果发现currentTokenPromise为null，则立即触发一次fetchAuthToken()尝试重新获取令牌。同时，可以调整setInterval的逻辑，在失败时不替换currentTokenPromise，而是在下一次请求时被动触发重试。
let currentTokenPromise = null; let tokenRefreshIntervalId = null; // 用于清除旧的定时器 async function initializeTokenManagement() { // 首次获取令牌 if (!currentTokenPromise) { currentTokenPromise = fetchAuthToken().catch(error => { console.error("首次获取令牌失败:", error); currentTokenPromise = null; // 失败时重置，以便下次请求重试 throw error; // 继续抛出错误，让调用者知道 }); } // 确保只有一个定时器在运行 if (tokenRefreshIntervalId) { clearInterval(tokenRefreshIntervalId); } tokenRefreshIntervalId = setInterval(() => { console.log('定时器触发：准备更新令牌...'); currentTokenPromise = fetchAuthToken().catch(error => { console.error("定时更新令牌失败:", error); currentTokenPromise = null; // 失败时重置，以便下次请求重试 // 可以在此处选择是否重新调度定时器，或等待下一次请求触发 throw error; }); }, 15 * 60 * 1000); } async function authorizedRequest(url, options = {}) { try { // 如果currentTokenPromise为null，说明令牌尚未获取或上次获取失败 if (!currentTokenPromise) { console.log("令牌Promise为空，尝试初始化或重试获取令牌..."); await initializeTokenManagement(); // 尝试初始化或重新获取 } const token = await currentTokenPromise; // 等待令牌 // ... 后续请求逻辑 return fetch(url, { ...options, headers: { ...options.headers, 'Authorization': `Bearer ${token}` } }); } catch (error) { console.error('授权请求失败:', error); // 可以在此处添加更复杂的错误处理，如重定向到登录页等 throw error; } } Service Worker生命周期: 确保initializeTokenManagement()在Service Worker的install或activate事件中被调用，或者在Service Worker的fetch事件处理器中首次需要令牌时被懒加载调用，以保证令牌管理在Service Worker生命周期内始终有效。
并发请求: 此方案天然支持并发请求。无论有多少个authorizedRequest同时调用，它们都会await同一个currentTokenPromise。一旦该Promise解决，所有等待的请求都会同时获取到令牌并继续执行。
令牌过期处理: 除了定时刷新，后端API有时会返回特定的状态码（如401 Unauthorized）表示令牌已过期。Service Worker可以捕获这些响应，并强制立即刷新令牌，然后重试原始请求。这需要更复杂的逻辑，可能涉及一个队列来存储因令牌过期而失败的请求，待新令牌获取后重新发送。
总结
通过利用JavaScript Promise的特性和可变变量的灵活替换，我们可以在Service Worker中高效地管理认证令牌，并确保所有网络请求都能同步获取到最新且有效的令牌。这种模式避免了直接修改Promise的复杂性和不可能性，提供了一种清晰、健壮的解决方案来处理令牌的周期性更新和并发请求的授权问题。同时，结合适当的错误处理机制，可以进一步提升应用的稳定性和用户体验。
