前端登录态"丢失"排查实录：当 API 已登录而界面仍提示请先登录

做开发时经常遇到这种诡异现象：接口返回一切正常，页面却坚称"未登录"。今天分享一个真实排查案例，希望能帮你少走弯路。

一、现象

某子域名页面加载后，顶栏一直显示"登录"按钮，但点绑定按钮时报错却又是登录态的文案；直接用 fetch 调登录态接口，返回的 JSON 里赫然写着已登录的用户名和 userId。界面与接口各说各话。

二、排查过程

第一步先排除 Cookie 问题：打开 DevTools 的 Application 面板，确认会话 Cookie 存在且域匹配，请求也带了凭证（fetch 记得 credentials: 'include'）。接口侧没问题。

第二步看前端如何判断登录态。读源码发现，页面的判断逻辑不是每次都调接口，而是优先读 localStorage 里缓存的用户信息缓存，读不到再用 JSONP 兜底写入。问题就出在这里：JSONP 兜底写入的是内存变量，页面刷新即丢；而 localStorage 键因为此前某次登录流程异常，从未被写入过。于是每次刷新页面，界面都"失忆"。

第三步验证猜想：手动往 localStorage 写入结构正确的用户信息对象后刷新页面，界面立刻恢复正常，按钮行为也正确了。

三、经验总结

1. 前端的"登录态"可能有多层：Cookie 会话、接口返回、本地缓存。三者不一致时界面行为最难猜，排查要一层层对账。

2. 遇到"接口说登录了、页面说没登录"，优先检查页面实际读取的是哪一层，而不是反复重登。

3. 给兜底逻辑留痕：像"JSONP 只写内存变量"这种设计，一旦主路径写入失败，用户就会进入玄学状态。关键状态落 localStorage 并做版本校验，日志里打印缓存读写，能省下大量排查时间。

四、结语

登录态问题看似低级，但混合了多域名 SSO、JSONP 和本地缓存时，现象会非常迷惑。下次再遇到界面与接口"打架"，不妨先对账这三层状态，往往几分钟就能定位。