React中利用自定义Hook获取Spotify API访问令牌的专业指南

// 尝试1: 直接在App组件内调用函数 (有效，但不可复用且不符合React范式)
import React, { useEffect } from 'react';

const clientId = 'YOUR_SPOTIFY_CLIENT_ID';
const clientSecret = 'YOUR_SPOTIFY_CLIENT_SECRET';

const App = () => {
  const getToken = () => {
    useEffect(() => {
      const requestParams = {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
      };

      async function fetchAccessToken() {
        try {
          const response = await fetch('https://accounts.spotify.com/api/token', requestParams);
          const data = await response.json();
          console.log("Access Token (direct call):", data.access_token);
        } catch (error) {
          console.error("Error fetching token:", error);
        }
      }
      fetchAccessToken();
    }, []); // 空数组表示只在组件挂载时执行一次
  };
  getToken(); // 在App组件内部直接调用

  return (
    <div>
      <h1>Spotify API Integration</h1>
      {/* ...其他组件内容 */}
    </div>
  );
};

export default App;

// 尝试2: 封装为独立组件 (无效，因为它没有渲染任何东西，也无法将令牌传递给父组件)
// components/GetToken.js
import React, { useEffect } from 'react';

const clientId = 'YOUR_SPOTIFY_CLIENT_ID';
const clientSecret = 'YOUR_SPOTIFY_CLIENT_SECRET';

export const GetToken = () => {
  useEffect(() => {
    const requestParams = {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
    };

    async function fetchAccessToken() {
      try {
        const response = await fetch('https://accounts.spotify.com/api/token', requestParams);
        const data = await response.json();
        console.log("Access Token (component call):", data.access_token); // 仍然只在内部打印
      } catch (error) {
        console.error("Error fetching token:", error);
      }
    }
    fetchAccessToken();
  }, []);

  return null; // 或者返回一个空 div，但无法将令牌传递出去
};

// App.js
import React from 'react';
import { GetToken } from './components/GetToken'; // 引入组件

const App = () => {
  return (
    <div>
      <h1>Spotify API Integration</h1>
      <GetToken /> {/* 渲染组件，但无法获取其内部的令牌 */}
    </div>
  );
};

export default App;

// hooks/useSpotifyAuth.js
import { useState, useEffect } from 'react';

// 注意：在实际项目中，这些ID和Secret应通过环境变量安全管理，
// 而不是硬编码在客户端代码中。
const clientId = 'YOUR_SPOTIFY_CLIENT_ID';
const clientSecret = 'YOUR_SPOTIFY_CLIENT_SECRET';

/**
 * 自定义Hook，用于获取Spotify API的客户端凭证访问令牌。
 * @returns {string | null} 返回获取到的访问令牌，或在加载/错误时返回null。
 */
const useSpotifyAuth = () => {
  const [accessToken, setAccessToken] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAccessToken = async () => {
      try {
        setLoading(true);
        setError(null);

        const requestParams = {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
        };

        const response = await fetch('https://accounts.spotify.com/api/token', requestParams);

        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(`Spotify API token error: ${response.status} - ${errorData.error_description || 'Unknown error'}`);
        }

        const data = await response.json();
        setAccessToken(data.access_token);
      } catch (err) {
        console.error("Failed to fetch Spotify access token:", err);
        setError(err.message);
        setAccessToken(null); // 确保在错误时清除旧令牌
      } finally {
        setLoading(false);
      }
    };

    fetchAccessToken();

    // 如果需要定时刷新令牌，可以在这里设置setInterval，并返回一个清除函数。
    // 但对于客户端凭证流，通常在需要时获取即可，或者由后端管理。
    // const refreshInterval = setInterval(fetchAccessToken, data.expires_in * 1000 * 0.9); // 提前刷新
    // return () => clearInterval(refreshInterval);

  }, []); // 空依赖数组表示此Effect只在组件挂载时运行一次

  return { accessToken, loading, error };
};

export default useSpotifyAuth;

// App.js
import React from 'react';
import useSpotifyAuth from './hooks/useSpotifyAuth'; // 导入自定义Hook

const App = () => {
  const { accessToken, loading, error } = useSpotifyAuth();

  if (loading) {
    return <div>Loading Spotify access token...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Spotify API Integration Example</h1>
      {accessToken ? (
        <>
          <p>Spotify Access Token: {accessToken}</p>
          <p>现在你可以使用这个令牌来调用Spotify的其他API了！</p>
          {/* 示例：使用令牌调用其他Spotify API */}
          {/* <SpotifyPlayer accessToken={accessToken} /> */}
        </>
      ) : (
        <p>未能获取Spotify访问令牌。</p>
      )}
    </div>
  );
};

export default App;