React项目如何正确刷新Spotify token，解决Axios请求返回400/404问题

• 授权流不匹配：你当前使用的是Spotify隐式授权流，该流仅返回短期有效的access_token，不提供refresh_token，无法通过刷新逻辑延长用户授权有效期。
• 刷新逻辑错误：你编写的刷新函数使用grant_type: "client_credentials"，属于客户端凭证授权流，该方式获取的token不绑定任何用户身份，仅可调用无需用户授权的公开接口，用于请求用户权限相关接口自然会返回400/403/404错误。
• 其他潜在小问题：
  • AUTH_URL开头存在多余空格，可能导致跳转授权时地址异常
  • useEffect未添加依赖项，会在组件每次渲染时重复执行
  • 需确认redirect_uri和Spotify开发者后台配置的地址完全一致，包括末尾的斜杠、http/https协议头

方案1：继续使用隐式授权流（适合纯前端小型项目） #

隐式流本身不支持无感刷新，token过期后引导用户重新登录即可，可添加定时器实现自动触发重新登录：

const AUTH_URL =
  "https://accounts.spotify.com/authorize?client_id=MY_ID&response_type=token&redirect_uri=http://localhost:3000/&scope=user-read-playback-state";

let Login = () => {
  const spotifyHandle = (params) => {
    const afterHashtag = params.substring(1);
    const param = afterHashtag.split("&");
    const paramsSplit = param.reduce((Para, currentPara) => {
      const [key, value] = currentPara.split("=");
      Para[key] = decodeURIComponent(value);
      return Para;
    }, {});
    return paramsSplit;
  };

  useEffect(() => {
    if (window.location.hash) {
      const { access_token, expires_in, error } = spotifyHandle(window.location.hash);
      if (error) return;
      localStorage.clear();
      localStorage.setItem("accessToken", access_token);
      const expireTime = Date.now() + Number(expires_in) * 1000;
      localStorage.setItem("expireTime", expireTime);
      // 提前1分钟触发重新登录
      setTimeout(() => {
        localStorage.removeItem("accessToken");
        localStorage.removeItem("expireTime");
        window.location.href = AUTH_URL;
      }, (Number(expires_in) - 60) * 1000);
      // 清除地址栏的hash参数
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []); // 添加空依赖避免重复执行

  return (
    <div>
      <a href={AUTH_URL}>
        <button>Login</button>
      </a>
    </div>
  );
};

Axios请求拦截器配置参考：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem("accessToken");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => Promise.reject(error));

方案2：改用授权码流实现无感刷新（适合正式项目） #

如果需要避免用户重复登录，需切换为Spotify授权码流，该流程需要后端配合，避免在前端暴露client_secret：

1. 前端跳转到授权地址时response_type改为code
2. 用户授权后Spotify会回调你的后端地址，后端携带code、client_secret等参数请求token接口，拿到access_token、refresh_token和过期时间返回给前端
3. 刷新token时的请求参数调整为：

// 该请求建议由后端代理，不要在前端暴露client_secret
const data = {
  grant_type: "refresh_token",
  refresh_token: "你之前存储的用户refresh_token",
  client_id: "你的client_id"
};

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