// 使用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 的区别

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

4. 实际应用建议

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

总结

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

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐