当前位置: 首页 > news >正文

vue如何获取 sessionStorage的值,获取token


// 使用Axios发送请求并处理下载
import axios from 'axios';

const handleDownload = () => {
  const params = {
    warehouseId: selectedWarehouseId.value
  };


  const apiUrl = `/api/materials/wmMatCheck/export-wmMatCheckDetail`;

  axios.get(apiUrl, {
    params,
    responseType: 'blob', // 接收二进制流
    headers: {
      'Content-Type': 'application/json', // 根据后端要求调整
      // 如果你需要携带token等信息
      'x-token': `Bearer ${getAccessTokenFromSessionStorage()}`
    }
  }).then(response => {
    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    export2Excel(blob, '库存数据.xlsx');
  }).catch(error => {
    console.error('下载失败:', error);
    // 处理错误提示
  });
};

// 从 sessionStorage 中获取 accessToken 的方法
 const getAccessTokenFromSessionStorage = () => {
  const tokenStr = sessionStorage.getItem('token');
  if (tokenStr) {
    try {
      const tokenObj = JSON.parse(tokenStr);
      return tokenObj.accessToken;
    } catch (error) {
      console.error('解析 token 时出错:', error);
    }
  }
  return null;
};

另外解释一下

sessionStorage 是浏览器提供的一种本地存储机制,用于在浏览器会话期间临时存储数据。它的特点和与 token 的关系如下:

1. sessionStorage 的特性

  • 生命周期:数据仅在当前浏览器会话(同一标签页 / 窗口)中有效。关闭标签页 / 窗口后,数据会被自动清除。
  • 作用域:每个标签页独立存储,不同标签页之间无法共享数据。
  • 容量:通常为 5-10MB,具体取决于浏览器。

2. token 变化是否会影响 sessionStorage 中的值?

  • 不会自动更新sessionStorage 中的数据是静态的,如果 token 在应用中被修改(例如通过接口返回新 token),必须手动更新 sessionStorage,否则它仍会保留旧值。
  • 示例

    javascript

    // 假设后端返回新 token
    const newToken = 'new_access_token';
    // 手动更新 sessionStorage 中的 token
    sessionStorage.setItem('token', JSON.stringify({ accessToken: newToken }));
    

3. 与 localStorage 的区别

特性sessionStoragelocalStorage
生命周期会话结束后自动清除除非手动删除,否则永久保存
作用域同一标签页 / 窗口同一浏览器同源窗口
数据更新不自动同步(需手动操作)自动同步(所有同源窗口)

4. 实际应用建议

  • token 更新时:如果通过接口获取到新 token,必须显式更新 sessionStorage 中的值,否则后续请求仍会使用旧 token
  • 避免缓存问题:在每次请求前,确保从 sessionStorage 中重新读取最新 token,而非直接使用内存中的旧值。
  • 存储格式:建议将 token 存储为 JSON 对象(如 { accessToken: 'xxx' }),方便后续扩展(例如存储过期时间)。

总结

sessionStorage 是临时存储,不会自动感知 token 的变化。若需更新 token,必须手动操作 sessionStorage.setItem

相关文章:

  • 全文 - MLIR: A Compiler Infrastructure for the End of Moore’s Law
  • 【并发编程】聊聊forkJoin的原理和最佳实践
  • 融合与创新:人工智能、数字化转型及计算机科学在高中教育管理中的应用探索
  • 六西格玛遇上Python:统计学的高效实践场
  • 平台与架构:深度解析与开发实践
  • ccfcsp1901线性分类器
  • MAC+PHY 的硬件连接
  • 哈尔滨工业大学DeepSeek公开课人工智能:大模型原理 技术与应用-从GPT到DeepSeek|附视频下载方法
  • 系统+网络练习题代码汇总
  • 区块链技术
  • 基于深度学习的图像识别技术在工业检测中的应用
  • 第16届蓝桥杯单片机4T模拟赛三
  • Vue3(自定义指令directive详解)
  • Kubernetes中将SpringBoot3的application.yaml配置文件迁移到ConfigMap实现配置与代码的分离
  • 简述一下Unity中的碰撞检测
  • c# 2025-3-22 周六
  • 优化 SQL 语句方向和提升性能技巧
  • 比特币驱动金融第八章——探索比特币之外:多样化的挖矿算法
  • EtherCAT转ProfiNet网关如何实现西门子1200PLC与伺服电机通讯(ProfiNet总线协议)
  • 【硬核实战】ETCD+AI智能调度深度整合!从架构设计到调优避坑,手把手教你打造高可用调度系统!
  • 临港新片区将新设5亿元启航基金:专门投向在临港发展的种子期、初创型企业
  • 中办、国办关于持续推进城市更新行动的意见
  • 中国证券业协会修订发布《证券纠纷调解规则》
  • 株洲一重病妇女被要求本人到银行取款时去世?当地警方:正在处理
  • 向猫学习禅修之后,你会发现将生活降格为劳作是多么愚蠢
  • 订婚不等于性同意!山西订婚强奸案入选最高法案例