JavaScript fetch中如何存储access token并传递给后续API请求

方案前提 #

第二个请求完全依赖第一个接口返回的access_token，必须保证第一个接口请求成功拿到token后再发起第二个请求。 #

场景1：仅当前页面会话临时使用（刷新后token不需要留存） #

直接用变量存储token即可，推荐用async/await语法简化异步流程，比传统链式then可读性和可维护性更高：

// 封装获取token的方法
async function getAccessToken() {
  const inputBody = 'client_id=00000000-0000-0000-0000-000000000001&secret=mySecretPassword';
  const headers = {
    'Content-Type':'application/x-www-form-urlencoded',
  };
  const res = await fetch('https://api.replicastudios.com/auth', {
    method: 'POST',
    body: inputBody,
    headers: headers
  });
  const body = await res.json();
  // 假设接口返回的token字段是access_token，根据实际返回字段调整
  return body.access_token;
}

// 封装获取voice列表的方法
async function getVoiceList(token) {
  const headers = {
    'Authorization':`Bearer ${token}`
  };
  const res = await fetch('https://api.replicastudios.com/voice', {
    method: 'GET',
    headers: headers
  });
  return await res.json();
}

// 按顺序执行请求
async function main() {
  try {
    const token = await getAccessToken();
    const voiceData = await getVoiceList(token);
    console.log(voiceData);
  } catch (err) {
    // 统一处理错误，比如token获取失败、接口请求失败等
    console.error('请求出错：', err);
  }
}

main();

场景2：需要持久化存储token（刷新页面/重启浏览器后可复用，避免重复请求token） #

如果token有固定有效期，不需要每次都重新申请，可以把token存在sessionStorage（仅当前标签页生效）或者localStorage（当前域名下永久生效，除非手动清除）里：

async function getValidToken() {
  // 先从本地存储取已有的token
  const savedToken = localStorage.getItem('replica_access_token');
  if (savedToken) {
    // 如果你能拿到token的过期时间，可以在这里加过期判断，过期了就重新请求
    return savedToken;
  }
  // 没有有效token就重新请求
  const inputBody = 'client_id=00000000-0000-0000-0000-000000000001&secret=mySecretPassword';
  const headers = {
    'Content-Type':'application/x-www-form-urlencoded',
  };
  const res = await fetch('https://api.replicastudios.com/auth', {
    method: 'POST',
    body: inputBody,
    headers: headers
  });
  const body = await res.json();
  const newToken = body.access_token;
  // 存到本地存储
  localStorage.setItem('replica_access_token', newToken);
  // 如果有过期时间可以同时存下来
  // localStorage.setItem('replica_token_expire', body.expire_at);
  return newToken;
}

async function main() {
  try {
    const token = await getValidToken();
    // 后续发起第二个请求逻辑和上面场景一致
    const headers = {
      'Authorization':`Bearer ${token}`
    };
    const res = await fetch('https://api.replicastudios.com/voice', {
      method: 'GET',
      headers: headers
    });
    const voiceData = await res.json();
    console.log(voiceData);
  } catch (err) {
    console.error('请求出错：', err);
  }
}

main();

注意事项 #

• 安全性要求高的场景不建议把token存在localStorage中，避免XSS攻击导致token泄露，优先用临时变量存储
• 实际使用中要增加对接口返回值的校验，判断token是否正常返回，避免后续请求传空值
• 如果接口返回的token有过期时间，一定要加过期判断逻辑，避免传失效token请求接口报错

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