切换账号前必须手动清理sessionstorage，否则旧账号敏感数据会残留；应于新账号认证成功后、跳转前调用sessionstorage.clear()或逐项removeitem，避免与localstorage混淆或依赖iframe隔离。
在同一个浏览器窗口中切换账号时，若不主动清理 sessionStorage，旧账号的敏感数据（如 token、用户ID、权限信息）可能残留，导致状态混乱或安全风险。SessionStorage 本身是页面会话级存储，但关键点在于：它不会因用户主动登出或切换账号而自动清空——必须手动干预。
理解 SessionStorage 的生命周期边界
SessionStorage 在以下情况会被清除：
- 关闭当前标签页（或整个浏览器窗口）时自动销毁
- 调用 sessionStorage.clear() 或 sessionStorage.removeItem(key) 主动删除
- 页面执行 location.reload(true)（强制重新加载并丢弃会话存储）——但该行为不可靠，不推荐依赖
⚠️ 注意：仅跳转到新页面（如 location.href = '/login'）或前端路由切换（如 Vue Router / React Router），不会清空 当前 tab 的 sessionStorage。
切换账号前必须执行显式清理
无论你是通过「退出登录」进入登录页，还是直接在首页点击「切换账号」弹窗重新认证，只要涉及身份变更，就应在获取新凭证前彻底清理旧会话数据。
- 推荐方式：调用 sessionStorage.clear() —— 简洁、彻底，适用于大多数场景
- 精细化控制：逐个移除关键字段，例如：
sessionStorage.removeItem('auth_token');<br>sessionStorage.removeItem('user_id');<br>sessionStorage.removeItem('permissions');
适合需要保留非用户相关临时状态（如筛选条件、折叠面板状态）的场景
与登录流程强绑定的清理时机
不要把清理逻辑放在“登出按钮点击”时就完成，而应确保它发生在「新账号认证成功之后、跳转/渲染主页之前」——这样可避免清理过早（如用户取消登录）或过晚（新数据已写入但旧数据仍残留）。
- 示例（伪代码）：
// 新账号登录接口返回成功后<br>if (response.success) {<br> sessionStorage.clear(); // 先清空<br> sessionStorage.setItem('auth_token', response.token);<br> sessionStorage.setItem('user_id', response.userId);<br> router.push('/dashboard'); // 再导航<br>} - 若使用第三方登录（如微信扫码、OAuth），回调成功进入前端后同样需先清再存
避免常见陷阱
- 不混用 localStorage 和 sessionStorage：若部分数据误存 localStorage，调用 sessionStorage.clear() 对其无效；切换账号时需同步检查并清理 localStorage 中的用户态字段
- 不依赖 iframe 或子页面自动隔离：同一 origin 下的 iframe 共享 sessionStorage，主页面切换账号时也需通知 iframe 清理自身存储（可通过 postMessage 协作）
- 服务端 Token 无效 ≠ 前端已清理：即使后端已使旧 token 失效，前端残留的 token 仍可能被误读、误传，造成 401 后反复重试等异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
