React带认证的API调用：获取Token并调用安全接口打印用户列表

实现步骤 #

1. 获取认证Token：先调用登录接口获取包含Token的用户认证信息
2. 调用安全接口：使用拿到的Token构造认证请求头，请求目标接口并打印结果

完整代码实现 #

import { useEffect } from 'react';

const AuthenticatedAPICall = () => {
  useEffect(() => {
    const fetchAuthenticatedData = async () => {
      try {
        // 1. 获取认证Token（使用reqres提供的测试登录接口）
        const authRes = await fetch('https://reqres.in/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email: 'eve.holt@reqres.in',
            password: 'cityslicka'
          })
        });

        if (!authRes.ok) throw new Error(`认证失败：${authRes.status}`);
        const { token } = await authRes.json();
        console.log('获取到的Token:', token);

        // 2. 使用Token调用安全接口
        const secureRes = await fetch('https://reqres.in/api/unknown', {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (!secureRes.ok) throw new Error(`接口请求失败：${secureRes.status}`);
        const { data: userList } = await secureRes.json();
        console.log('用户列表:', userList);
      } catch (err) {
        console.error('请求出错:', err.message);
      }
    };

    fetchAuthenticatedData();
  }, []);

  return <div>请打开浏览器控制台查看API调用结果</div>;
};

export default AuthenticatedAPICall;

关键细节说明 #

• 认证头格式：Authorization头必须是Bearer + Token的格式，注意Bearer后面的空格不能省略
• 错误处理：通过检查response.ok判断HTTP请求是否成功，避免状态码非200的请求被忽略
• 异步逻辑：使用async/await处理异步请求，让代码更易读；包裹在useEffect中确保组件挂载时执行一次
• 测试账号：示例中使用的是reqres提供的测试登录账号，实际项目中需替换为用户输入的真实凭证

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