当前位置：首页 > article >正文

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

article 2025/3/26 0:03:07


// 使用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' }），方便后续扩展（例如存储过期时间）。