浏览器关闭后维持用户身份验证的正确实现方案问询

像Facebook这类平台实现浏览器关闭后自动登录，核心是用HTTP-only Cookie存储长期有效的Refresh Token，配合短期Access Token完成验证，完全不需要依赖localStorage这类风险较高的前端存储。

具体实现逻辑 #

• Token分层管理：
  • Access Token：短期有效（比如15分钟），仅存在前端内存（比如全局变量、Vuex/Redux状态），每次API请求携带，过期后用Refresh Token换取新的Access Token。
  • Refresh Token：长期有效（可配置为30天甚至更久），存储在HTTP-only、Secure、SameSite=Strict/Lax的Cookie中，浏览器会自动在请求时携带，前端JS无法读取，从根源避免XSS窃取风险。
• 自动登录流程：
  1. 用户首次登录成功，后端返回带上述属性的Refresh Token Cookie，同时返回短期Access Token给前端存入内存。
  2. 浏览器关闭再打开时，页面加载阶段自动发起/api/refresh接口请求，浏览器自动带上Refresh Token Cookie。
  3. 后端验证Refresh Token有效性后，返回新的Access Token，前端存入内存，恢复登录状态。
• 安全加固细节：
  • 给Refresh Token绑定设备标识（比如浏览器UA+IP的哈希值），设备变更时强制重新登录，降低令牌泄露后的盗用风险。
  • 实现Refresh Token滚动更新机制：每次用旧Token换取新Token时，立即失效旧Token，避免同一Token多次使用。
  • 开启Cookie的Secure属性（仅HTTPS环境传输）、SameSite=Strict属性（防范CSRF攻击）。

为什么坚决不用localStorage？ #

localStorage完全暴露在前端JS环境中，一旦页面遭遇XSS攻击，攻击者可直接读取并窃取令牌。而HTTP-only Cookie无法被前端JS访问，XSS攻击拿不到敏感令牌，安全性提升几个量级——Facebook这类平台绝不会用localStorage存储敏感验证信息。

关于「记住我」选项的补充 #

平台提供的「记住我」功能，本质就是控制Refresh Token的有效期：勾选则设置较长有效期，不勾选则设置为会话级Cookie（浏览器关闭即过期），灵活适配用户需求。

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