在现代web应用中，service worker常被用于拦截和处理网络请求，实现离线缓存、推送通知等功能。当应用依赖于认证令牌进行api授权时，service worker也成为一个理想的令牌管理场所。然而，令牌通常具有有效期，需要周期性地刷新。这就带来了一个挑战：如何在service worker中存储和更新令牌，并确保在令牌更新期间，所有新的网络请求都能等待新令牌的生成，而非使用过期或正在更新的旧令牌。
核心需求可以总结为：
直接修改一个已解决（resolved）或已拒绝（rejected）的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错误），currentTokenPromise将变为一个被拒绝的Promise。这意味着在接下来的15分钟内，所有依赖currentTokenPromise的authorizedRequest都会立即失败。
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的复杂性和不可能性，提供了一种清晰、健壮的解决方案来处理令牌的周期性更新和并发请求的授权问题。同时，结合适当的错误处理机制，可以进一步提升应用的稳定性和用户体验。
以上就是Service Worker架构中的高效令牌处理与网络请求同步策略的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
686
收藏
