如何在JavaScript Fetch API中使用新会话实现两次独立的智能卡认证请求
如何在JavaScript Fetch API中使用新会话实现两次独立的智能卡认证请求
嘿,我刚好处理过类似的智能卡认证场景,这个问题的核心其实是浏览器的cookie会话复用机制在搞怪——第一次请求成功后,服务器设置的LTPA2 Token cookie会被浏览器自动保存,第二次请求默认会带上这个cookie,导致服务器识别成第一个用户的凭证。要实现两次独立的认证,关键就是在第二次请求前清除掉旧的认证cookie,让浏览器触发新的智能卡认证流程。
具体解决方案步骤
- 完成第一个用户的认证请求:使用
credentials: include确保第一次请求携带智能卡认证后的cookie,完成请求。 - 清除旧的LTPA2 Token cookie:在第一个请求成功后,删除浏览器中存储的
LTPA2 Token,注意必须和服务器设置cookie时的参数完全匹配(比如path、domain、secure等)。 - 发起第二个用户的认证请求:此时浏览器没有旧的认证cookie,会再次弹出智能卡提示,让第二个用户插入卡片,完成第二次独立认证。
代码示例
首先写一个清除LTPA2 Token的工具函数:
function clearLTPACookie() { // 请根据服务器Set-Cookie头的实际参数调整以下内容 const cookieParams = { name: "LTPA2 Token", path: "/", // 服务器设置的cookie路径,比如可能是/app domain: ".your-domain.com", // 服务器设置的域名,同域场景可省略 secure: true, // 如果服务器设置了secure,这里也要加 sameSite: "None" // 对应服务器的SameSite设置,可能是Strict/Lax/None }; // 构造删除cookie的字符串 let cookieStr = `${cookieParams.name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC`; if (cookieParams.path) cookieStr += `; path=${cookieParams.path}`; if (cookieParams.domain) cookieStr += `; domain=${cookieParams.domain}`; if (cookieParams.secure) cookieStr += "; secure"; if (cookieParams.sameSite) cookieStr += `; SameSite=${cookieParams.sameSite}`; document.cookie = cookieStr; }
然后是完整的请求流程:
// 第一步:处理第一个用户的认证请求 fetch("/api/fetch1", { method: "GET", // 根据你的接口调整请求方法 credentials: "include" }) .then(async (response) => { if (!response.ok) { throw new Error(`User1认证失败,状态码:${response.status}`); } console.log("User1智能卡认证成功,开始准备第二次请求"); // 清除旧的认证cookie clearLTPACookie(); // 第二步:处理第二个用户的认证请求 return fetch("/api/fetch2", { method: "GET", credentials: "include" }); }) .then(async (response) => { if (!response.ok) { throw new Error(`User2认证失败,状态码:${response.status}`); } console.log("User2智能卡认证成功"); // 在这里处理第二个请求的返回结果 }) .catch((error) => { console.error("认证流程出错:", error.message); });
关键注意事项
- cookie参数必须完全匹配:浏览器只会删除和你设置的参数完全一致的cookie,所以一定要对照服务器返回的
Set-Cookie头信息来调整clearLTPACookie函数里的参数。比如服务器设置的path=/app,你就不能写path=/,否则删不掉。 - 安全限制适配:如果你的站点使用HTTPS(智能卡认证场景一般都会用),
secure参数必须加上;如果涉及跨域场景,SameSite=None也要对应设置。 - 备选会话隔离思路:如果清除cookie的方式不适用,也可以考虑用独立的
<iframe>来发起第二次请求——iframe有自己的cookie上下文,不会和主页面的会话冲突,但这种方式需要处理iframe和主页面的通信,相对复杂一些。
备注:内容来源于stack exchange,提问作者Dave




