咨询：将Google OAuth登录令牌存储至浏览器全局实现跨标签页免登录

1. 替换Session Storage为Local Storage #

Session Storage是标签页级别的存储，仅当前标签页可访问；而Local Storage属于浏览器全局存储，同一域名下所有标签页共享数据，这是解决问题的核心：

• 存储令牌：将原代码中的sessionStorage.setItem('token', yourGoogleOAuthToken)替换为localStorage.setItem('token', yourGoogleOAuthToken)
• 读取令牌：用localStorage.getItem('token')替代sessionStorage.getItem('token')
• 登出清理：执行localStorage.removeItem('token')（或localStorage.clear()），确保所有标签页的登录状态同步清除

2. 监听存储变化，同步多标签页状态 #

如果用户在某一个标签页执行登出操作，其他标签页需要自动同步状态，可通过监听storage事件实现：

window.addEventListener('storage', (event) => {
  // 监听token键的变化，当token被清除时触发登出逻辑
  if (event.key === 'token' && event.newValue === null) {
    // 这里写你的登出逻辑，比如跳转登录页、清空用户信息
    window.location.href = '/login';
  }
});

3. 安全性优化建议 #

• 若后端支持，优先使用HttpOnly + Secure属性的Cookie存储令牌：Cookie默认在同一域名下所有标签页共享，且HttpOnly Cookie无法被前端JS读取，能有效降低XSS攻击风险；同时设置SameSite=Lax/Strict属性防范CSRF攻击
• 如果必须用Local Storage，需严格防范XSS漏洞：对所有用户输入做过滤转义，避免恶意脚本窃取令牌

4. 配合Google OAuth的额外注意事项 #

• 存储令牌时建议同时保存过期时间，每次发起请求前先检查令牌是否过期，过期则自动触发Google OAuth重新授权流程
• 若使用Cookie存储，需确保Google OAuth回调后后端正确设置Cookie的域名、路径等属性，保证跨标签页可访问

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