React调用Spotify API遇401错误及useEffect请求写法咨询

一、401 错误的核心原因 #

你通过client_credentials模式获取的token属于客户端凭证流，这类token仅能访问Spotify公开数据（比如歌曲搜索），不包含用户身份权限。而/v1/me接口需要的是用户授权后的token，必须通过授权码流或隐式授权流获取（这两个流程需要用户登录Spotify并授权你的应用）。所以哪怕你刚拿到token就调用接口，也会返回401——和token过期无关，是权限范围不匹配。

二、React 请求写法优化 #

优化方案：合并逻辑+简化判断 #

把获取token和用户信息的逻辑合并到单个useEffect中，用async/await替代链式then，让代码更清晰，同时避免冗余的state依赖判断：

const [token, setToken] = useState("");
const [userID, setUserID] = useState("");

useEffect(() => {
  const fetchAuthData = async () => {
    // 1. 获取客户端凭证token
    const tokenRequestOpts = {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`,
    };

    try {
      const tokenRes = await fetch("https://accounts.spotify.com/api/token", tokenRequestOpts);
      const tokenData = await tokenRes.json();
      setToken(tokenData.access_token);

      // 注意：如果要调用/v1/me，这里必须替换成用户授权流的token
      if (tokenData.access_token) {
        const userRequestOpts = {
          method: "GET",
          headers: { Authorization: `Bearer ${tokenData.access_token}` },
        };

        const userRes = await fetch("https://api.spotify.com/v1/me", userRequestOpts);
        const userData = await userRes.json();
        console.log(userData);
        // 若使用授权流token，此处可正常设置userID
        // setUserID(userData.id);
      }
    } catch (err) {
      console.error("请求失败：", err);
    }
  };

  fetchAuthData();
}, []);

关键优化点 #

• 用async/await让异步逻辑线性化，比链式then更易读
• 合并两个useEffect，减少不必要的state依赖触发
• 增加try/catch捕获请求异常，避免页面崩溃
• 直接使用接口返回的token发起后续请求，无需等待state更新

额外说明 #

如果你的应用必须获取用户ID，必须切换到授权码流（安全级别更高）：

1. 引导用户跳转至Spotify授权页面，获取授权码
2. 用授权码+Client ID+Client Secret换取带用户权限的token
3. 用该token调用/v1/me接口即可正常获取用户信息

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