Le code React rencontre une réponse inattendue de l'API Spotify

Question

Je crée une application dans React à l'aide de l'API Spotify.

Tout d'abord, j'obtiens le jeton d'accès en utilisant mon clientID et clientSecret. Ensuite, j'essaie d'obtenir l'ID utilisateur en utilisant ce jeton. La documentation mentionne que vous devez faire une requête get et transmettre le jeton en en-tête.

Le problème est que je reçois toujours un code d'erreur 401 en réponse. La documentation mentionne que cette erreur peut être due au fait que le jeton a expiré. Mais dans mon code, j'essaie d'obtenir l'ID utilisateur immédiatement après avoir obtenu le jeton.

Ma deuxième question concerne les requêtes dans React. Comme vous pouvez le voir, j'ai utilisé le hook useEffect pour y parvenir, mais je ne suis pas sûr que ce soit la bonne approche. De plus, la façon dont je fais la deuxième requête ne me semble pas correcte (instruction if dans useEffect).

Toute aide est grandement appréciée !

P.S. apiKey et apiSecret sont des variables globales, la première requête a bien fonctionné, elle a renvoyé un jeton valide, qui a été utilisé avec succès pour effectuer une autre requête get pour rechercher des chansons.

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

// Obtain access token and user ID
useEffect(() => {
  // Get access token
  const parameters = {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`,
  };

  fetch("https://accounts.spotify.com/api/token", parameters)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setToken(data.access_token);
      return data.access_token;
    });
}, []);

// Obtain user ID once token is obtained
useEffect(() => {
  if (token != "") {
    const parameters = {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };

    fetch("https://api.spotify.com/v1/me", parameters)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
      });
  }
}, [token]);

Answer 1

Il semble que votre code soit sur la bonne voie, mais le problème peut être lié à la façon dont le jeton est géré et au moment où la deuxième demande d'identifiant utilisateur est effectuée. De plus, il n’est pas nécessaire d’utiliser deux useEffectcrochets.

const [userID, setUserID] = useState('');

useEffect(() => {
  // 获取访问令牌的函数
  const getAccessToken = async () => {
    try {
      const response = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `grant_type=client_credentials&client_id=${apiKey}&client_secret=${apiSecret}`,
      });
      
      if (!response.ok) {
        throw new Error('获取访问令牌失败');
      }

      const data = await response.json();
      return data.access_token;
    } catch (error) {
      console.error('获取访问令牌时发生错误:', error);
      return null;
    }
  };

  // 获取用户ID的函数
  const getUserID = async () => {
    const accessToken = await getAccessToken();
    
    if (accessToken) {
      try {
        const response = await fetch('https://api.spotify.com/v1/me', {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${accessToken}`,
          },
        });

        if (!response.ok) {
          throw new Error('获取用户ID失败');
        }

        const data = await response.json();
        setUserID(data.id);
      } catch (error) {
        console.error('获取用户ID时发生错误:', error);
      }
    }
  }; 

 getUserID();
}, []);