基于OAuth登录状态的前端UI展示问题求助

背景 #

后端基于第三方OAuth（如Google、Twitter）实现REST API认证：

• 用户访问/api/login时跳转至OAuth授权流程
• 授权完成后回调到/api/login/callback，后端存储登录信息并返回Same-Site HttpOnly会话Cookie，用于后续请求验证用户ID
• 后续前端请求通过该Cookie获取用户信息，后端使用存储的OAuth令牌处理请求

前端需求：

• 用户访问根路由/时，未登录状态显示介绍页和登录按钮；登录状态显示专属UI
• 点击登录按钮跳转至/api/login，完成OAuth流程后回调重定向回/

核心问题：由于会话Cookie是HttpOnly，前端无法在页面加载时直接读取它来判断登录状态，无法即时渲染对应UI。

已评估的方案 #

• 方案1：调用/api/me接口判断状态
  页面加载时发起请求，根据返回200（已登录）或401（未登录）切换UI，但请求期间前端会处于不确定状态，体验不佳。
• 方案2：取消Cookie的HttpOnly属性
  前端可直接读取Cookie判断状态，但会引入XSS攻击风险，安全性不足。
• 方案3：同时设置非HttpOnly标记Cookie
  后端在返回HttpOnly会话Cookie的同时，额外发送一个非HttpOnly的Cookie（仅用于标记登录状态）。即便该标记被篡改，后续API请求仍会因无效会话Cookie返回401，最坏情况只是前端短暂显示错误UI，安全性影响可控。
• 方案4：登录前在前端存储标记
  点击登录按钮时，在localStorage或Cookie中存入登录标记，页面加载时检查该标记。但无法确认OAuth流程是否真的成功，存在误判可能。
• 方案5：拆分路由区分登录状态
  未登录用户访问/，登录成功后重定向至/signed-in。但无法区分用户是主动访问/signed-in还是会话过期后误访问，仍需额外验证状态。

当前倾向方案及优化思路 #

个人认为方案3最可行，同时可结合方案4做补充优化：

1. 点击登录按钮时，前端在localStorage/Cookie中存入“授权中”标记
2. OAuth授权成功后，后端重定向回/并设置非HttpOnly标记Cookie；若失败则重定向至/fail，前端删除“授权中”标记
3. 页面加载时：
   • 若有“授权中”标记，发起/api/me请求验证实际状态，根据结果更新UI并清除标记
   • 若无标记，直接通过非HttpOnly Cookie判断状态

可能的异常情况：

• 用户在登录过程中关闭页面，未被重定向至/fail删除“授权中”标记，下次加载时会触发验证请求修正状态
• 用户撤销OAuth令牌，此时标记Cookie仍存在，但后续API请求会返回401，前端需监听该状态并切换UI

寻求更优方案 #

上述方案虽能解决问题，但感觉这是前端OAuth认证中的常见场景，想了解是否有更优雅、体验更好的实现方式（注：不考虑SSR方案，否则可在服务器端检查会话Cookie并返回对应HTML模板）。

内容的提问来源于stack exchange，提问作者Lime