Reactjs 如何使用youtube数据api v3参数挖掘

我想使用youtube数据api v3获取用户的播放列表

这里是youtube.js

import axios from 'axios';
const KEY = process.env.REACT_APP_API_KEY;

export default axios.create({
    baseURL: 'https://www.googleapis.com/youtube/v3/',
    params: {
        part: 'snippet',
        maxResults: 5,
        key: KEY
    }
})  

这是请求用户播放列表的按钮。 道具是令牌（使用oauth2.0访问\u令牌）

我想使用youtube api的“我的”参数和此令牌获取用户的播放列表

要使用我的参数，我必须发送令牌

如何发送此令牌

const LoadPlaylistButton = ({ token }) => {
    
    const loadPlaylists = async () => {
        const response = await youtube.get('/playlists', {
            params: {
                mine: true
            }
        })
        console.log("log: ", response);
    }
    
    return (
        <button onClick={loadPlaylists}>LoadPlaylist</button>
    );
};
export default LoadPlaylistButton;

const-loadPlayButton=（{token}）=>{
const loadPlaylists=async（）=>{
const response=wait youtube.get（“/playlists”{
参数：{
我的：是的
}
})
日志（“日志：”，响应）；
}
返回(
加载播放列表
);
};
导出默认加载按钮；

使用mine需要您获得用户授权才能请求该数据。API密钥只允许您访问公共数据，而不是私有数据

<script src="https://apis.google.com/js/api.js"></script>
<script>
  /**
   * Sample JavaScript code for youtube.playlists.list
   * See instructions for running APIs Explorer code samples locally:
   * https://developers.google.com/explorer-help/guides/code_samples#javascript
   */

  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    gapi.client.setApiKey("YOUR_API_KEY");
    return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtube.playlists.list({})
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>

</body>
</html>

/**
*youtube.playlists.list的JavaScript代码示例
*请参阅本地运行API Explorer代码示例的说明：
* https://developers.google.com/explorer-help/guides/code_samples#javascript
*/
函数身份验证（）{
返回gapi.auth2.getAuthInstance（）
.signIn（{范围：https://www.googleapis.com/auth/youtube.readonly"})
.then（function（）{console.log（“登录成功”）；}，
函数（err）{console.error（“错误登录”，err）；}）；
}
函数loadClient（）{
gapi.client.setApiKey（“您的API密钥”）；
返回gapi.client.load（“https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then（function（）{console.log（“为API加载的GAPI客户端”）；}，
函数（err）{console.error（“为API加载GAPI客户端时出错”，err）；}）；
}
//在调用此方法之前，请确保已加载客户端并完成登录。
函数execute（）{
返回gapi.client.youtube.playlists.list（{}）
.然后（功能（响应）{
//在这里处理结果（response.result具有解析的主体）。
控制台日志（“响应”，响应）；
},
函数（err）{console.error（“executeerror”，err）；}）；
}
load（“客户端：auth2”，函数（）{
gapi.auth2.init（{client_id:“YOUR_client_id”}）；
});
授权加载
执行