Vue SPA中如何获取localforage存储的Bearer Token？

嗨，这个问题我太懂了！你遇到的核心问题是**localforage.getItem()是异步方法**，它返回的是一个Promise对象，而不是直接的token字符串——你在控制台里看到的result是浏览器调试工具展示的Promise内部状态，但这并不是可以直接在代码里访问的公开属性，所以直接写token.result会返回null。

下面给你两种正确获取token的方法，选哪种都可以：

给你的组件方法加上async关键字，然后用await等待Promise完成，就能拿到真正的token了：

// 假设这是你处理文件上传的方法
async handleFileUpload() {
  try {
    // 等待localforage获取token完成
    const token = await localforage.getItem('authtoken');
    
    // 现在token就是你要的Bearer字符串了
    console.log('拿到的token:', token);

    // 接下来调用上传API，把token放到请求头里
    const formData = new FormData();
    formData.append('file', yourFile); // 替换成你的文件对象

    const uploadResponse = await fetch('/your-api/upload-url', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`
      },
      body: formData
    });

    // 处理上传成功的逻辑
    const result = await uploadResponse.json();
    console.log('上传成功:', result);
  } catch (error) {
    // 处理获取token失败或者上传出错的情况
    console.error('出错了:', error);
  }
}

如果你的代码环境不支持async/await（现在基本很少见了），可以用传统的Promise回调：

localforage.getItem('authtoken')
  .then(token => {
    // 这里拿到了正确的token
    console.log('拿到的token:', token);

    // 准备上传数据
    const formData = new FormData();
    formData.append('file', yourFile);

    // 调用上传API
    return fetch('/your-api/upload-url', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`
      },
      body: formData
    });
  })
  .then(uploadResponse => uploadResponse.json())
  .then(result => {
    console.log('上传成功:', result);
  })
  .catch(error => {
    console.error('出错了:', error);
  });

总结一下：异步方法返回的Promise必须通过await或者.then()来获取最终结果，不能直接访问内部的result属性哦～

内容的提问来源于stack exchange，提问作者Peter