接入公司OAuth 2.0 SSO后如何重定向到首页并清除URL中的code参数

现有实现问题梳理 #

• React 逻辑问题：useEffect 没有加空依赖数组，会导致页面无限重复发起请求，属于基础逻辑错误。
• 重定向逻辑无效：你写的 .then("<Redirect to={routes.home.path}/>") 是纯字符串，React 路由的 Redirect 是 JSX 组件，不能放在回调里这么用，所以重定向根本没生效，才导致 code 一直留在地址栏。
• 接口设计冗余：后端的 /create 接口完全没有存在必要，相当于把前端拿到的 code 多传了一次，反而多了一次暴露风险。
• 安全风险：授权码 code 直接暴露在前端地址栏，会留在浏览器历史记录中，哪怕是一次性的也存在被盗用的隐患。

去除地址栏code的实现方案 #

方案1：前端快速处理（改动最小） #

请求成功拿到用户信息后，直接调用浏览器 API 清除地址栏参数，页面不会刷新、状态也不会丢失：

useEffect(() => {
  const queryParams = new URLSearchParams(window.location.search);
  const code = queryParams.get('code');
  // 只有存在code的时候才发请求，避免无意义请求
  if (!code) return;
  fetch("http://localhost:5000/callback?code=" + code, {
    method: "get",
  })
  .then(response => response.json())
  .then(json => {
    setuserinfo(json);
    // 清除地址栏query参数，用replace不会留下历史记录
    window.history.replaceState({}, document.title, window.location.pathname);
    // 如果要跳转到首页，用React路由的useNavigate即可：
    // navigate(routes.home.path, { replace: true })
  })
  .catch(ex => console.log(ex));
}, []); // 加空依赖，只在页面首次加载时执行

方案2：标准OAuth流程优化（更安全） #

直接把OAuth授权的redirect_uri改成后端接口地址（比如http://localhost:5000/callback），不要回调到前端：

1. 用户跳转SSO授权后，直接回调到你后端的/callback接口，code全程不会到前端
2. 后端拿code换access_token、拿到用户信息后，直接重定向回前端首页，用户信息可以存在Cookie里，或者生成一个一次性的临时校验参数带回到前端
3. 前端拿到用户信息后正常渲染即可，全程地址栏不会出现code参数

后端代码优化建议 #

可以直接删掉冗余的/create接口，/callback接口逻辑不用大改，只需要调整如果用方案2的话，拿到用户信息后重定向回前端即可。

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