Vue中Token存储那点事儿：从localStorage到内存的避坑指南

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个写了6年Vue还在踩坑的前端老司机。今天咱们聊聊一个看似简单却暗藏玄机的话题------Token存储。这玩意儿就像你家的钥匙，存对了地方安全又方便，存错了地方......嘿嘿，等着被老婆骂吧（别问我怎么知道的）。

一、Token是个啥？为啥要存？

简单说，Token就是服务器给你的"临时通行证"，证明你登录过。前端拿到后，每次请求都得带上它，不然服务器翻脸不认人："你谁啊？不给你数据！"

常见存储方案：

localStorage（本地存储）
sessionStorage（会话存储）
Cookie（小饼干）
内存变量（Vuex/Pinia/React Context）

二、四种存储方式掰头赛

1. localStorage：简单但危险

代码示例：

javascript 复制代码

// 存
localStorage.setItem('token', '我是token我很长');  
// 取
const token = localStorage.getItem('token');

优点：

关浏览器也能留着，适合"记住登录"功能
缺点：
XSS攻击重灾区！黑客拿到token就能冒充你（想象把家门钥匙贴在大门上）
手动清理麻烦，用户不退出登录就永远存在

我的翻车现场：

去年用localStorage存token，结果被安全团队一顿喷，连夜改成HttpOnly Cookie......

2. sessionStorage：稍微安全点

javascript 复制代码

// 存
sessionStorage.setItem('token', '我活不过关浏览器');

优点：

关浏览器自动消失，减少XSS攻击后的危害
缺点：
刷新页面还在，但开新标签页就没了（用户："我明明登录了怎么又要输密码？"）

配合HttpOnly+Secure：

javascript 复制代码

// 后端设置Cookie时加标志
Set-Cookie: token=xxxx; HttpOnly; Secure; SameSite=Strict

优点：

HttpOnly防XSS，Secure强制HTTPS，SameSite防CSRF
浏览器自动管理，不用手动处理
缺点：
需要后端配合，前端不能直接操作（document.cookie拿不到HttpOnly的）
容易遇到跨域问题（CORS配置了解一下？）

4. 内存变量：最安全但最"脆"

Vuex示例：

javascript 复制代码

// store.js
state: { token: '' },
mutations: {
  setToken(state, token) {
    state.token = token; // 我活在内存里！
  }
}

优点：

极致安全 ，关标签页就消失，XSS也难偷
缺点：
刷新页面就没了（用户："怎么又双叒要登录？！"）

三、我的终极方案：组合拳！

经过多次被安全审计吊打后，我的当前方案：

首次登录：
- 后端返回Token + RefreshToken
- Token存内存变量（Vuex/Pinia）
- RefreshToken存HttpOnly Cookie
页面刷新时：
- 用Cookie里的RefreshToken偷偷换新Token（静默刷新）
关键操作（如支付）：
- 强制重新输入密码换短期Token

代码片段：

javascript 复制代码

// 静默刷新示例
async function silentRefresh() {
  try {
    const { data } = await axios.post('/refresh', {}, { withCredentials: true });
    store.commit('setToken', data.token); // 新Token存内存
  } catch (err) {
    // 跳转到登录页
  }
}

四、血泪总结

普通后台系统：内存变量+自动刷新（平衡安全与体验）
金融级应用：HttpOnly Cookie+短期Token+频繁验证
千万别干：
- 把Token明文扔在URL里（浏览器历史记录会泄露）
- 用localStorage存敏感信息（等着背锅吧）

Vue中Token存储那点事儿：从localStorage到内存的避坑指南

一、Token是个啥？为啥要存？

二、四种存储方式掰头赛

1. localStorage：简单但危险

2. sessionStorage：稍微安全点

3. Cookie：老派但靠谱

4. 内存变量：最安全但最"脆"

三、我的终极方案：组合拳！

四、血泪总结