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

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

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

技术qq交流群:906392632

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


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

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

常见存储方案:

  1. localStorage(本地存储)
  2. sessionStorage(会话存储)
  3. Cookie(小饼干)
  4. 内存变量(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攻击后的危害
    缺点:
  • 刷新页面还在,但开新标签页就没了(用户:"我明明登录了怎么又要输密码?")

3. Cookie:老派但靠谱

配合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也难偷
    缺点:
  • 刷新页面就没了(用户:"怎么又双叒要登录?!")

三、我的终极方案:组合拳!

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

  1. 首次登录

    • 后端返回Token + RefreshToken
    • Token存内存变量(Vuex/Pinia)
    • RefreshToken存HttpOnly Cookie
  2. 页面刷新时

    • 用Cookie里的RefreshToken偷偷换新Token(静默刷新)
  3. 关键操作(如支付):

    • 强制重新输入密码换短期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存敏感信息(等着背锅吧)
相关推荐
OEC小胖胖4 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水25 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐33 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062740 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669132 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx2 小时前
前端-CSS-day1
前端·css