javascript">
// 使用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，否则它仍会保留旧值。 - 示例：
// 假设后端返回新 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。
