解决Spotify登录回调POST重复调用及令牌传递问题

一、解决POST请求重复调用问题 #

常见原因及修复步骤 #

• 组件重复触发请求
  如果是React类组件或函数组件，检查请求触发逻辑是否在渲染周期内重复执行。比如在useEffect中未正确设置依赖项，导致每次组件渲染都发起请求。可以用useRef标记请求是否已执行：

  const isTokenFetched = useRef(false);
  
  useEffect(() => {
    const code = new URLSearchParams(window.location.search).get('code');
    if (code && !isTokenFetched.current) {
      fetchSpotifyToken(code);
      isTokenFetched.current = true;
    }
  }, []);
  

• 事件绑定重复
  检查登录按钮或跳转逻辑的事件绑定，避免在组件渲染时重复绑定事件（比如在render函数内定义事件处理函数）。用useCallback缓存事件处理函数，或确保事件只绑定一次。
• 路由钩子重复触发
  如果是路由跳转时触发的请求，排查路由守卫、导航钩子是否存在重复注册，导致请求被多次调用。

二、解决access_token无法传递到首页问题 #

核心思路：用持久化存储替代组件状态传递 #

• 获取令牌后持久化存储
  拿到令牌后，将其存入localStorage、sessionStorage或Cookie中，避免仅存在组件状态里（页面跳转后状态会丢失）：

  const fetchSpotifyToken = async (code: string) => {
    const response = await fetch('https://accounts.spotify.com/api/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`
      },
      body: new URLSearchParams({
        grant_type: 'authorization_code',
        code,
        redirect_uri: YOUR_REDIRECT_URI
      })
    });
    const data = await response.json();
    // 存储令牌到localStorage
    localStorage.setItem('spotify_access_token', data.access_token);
    // 跳转到首页
    window.location.href = '/';
  };
  

• 首页读取令牌
  在首页初始化时，从持久化存储中读取令牌即可：

  // 首页组件逻辑
  const accessToken = localStorage.getItem('spotify_access_token');
  // 后续使用令牌发起Spotify API请求
  if (accessToken) {
    fetch('https://api.spotify.com/v1/me', {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    });
  }
  

额外注意 #

• 若需更高安全性，可改用HttpOnly Cookie存储令牌（需要后端配合设置），避免XSS攻击风险。
• 记得同步存储expires_in字段，计算令牌过期时间，后续实现自动刷新逻辑。

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