如何配置react-oidc-context登录后移除URL中的grant_id与code参数

方法一：利用onSignInCallback回调自定义跳转 #

react-oidc-context的AuthProvider组件提供了onSignInCallback属性，可在认证完成后自定义跳转逻辑，直接跳转到不带参数的根URL。

配置示例：

import { AuthProvider } from 'react-oidc-context';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  const onSignInCallback = () => {
    // 用react-router跳转并替换历史记录，清除参数
    navigate('/', { replace: true });
    // 若不使用react-router，可改用原生API：
    // window.history.replaceState({}, document.title, window.location.origin);
  };

  const oidcConfig = {
    authority: 'https://你的OIDC提供商地址',
    client_id: '你的客户端ID',
    redirect_uri: window.location.origin, // 根URL作为重定向地址
    response_type: 'code',
    scope: 'openid profile email',
    // 其他必要配置项
  };

  return (
    <AuthProvider
      {...oidcConfig}
      onSignInCallback={onSignInCallback}
    >
      {/* 你的应用内容 */}
    </AuthProvider>
  );
}

export default App;

方法二：路由层面检测并跳转 #

确保redirect_uri配置为应用根URL，然后在根路由组件中检测URL参数，自动重定向到无参数的根路径：

import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function RootPage() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    const hasOidcParams = location.search.includes('grant_id') || location.search.includes('code');
    if (hasOidcParams) {
      navigate('/', { replace: true });
    }
  }, [location, navigate]);

  return <div>你的应用首页内容</div>;
}

注意事项 #

• 必须保证redirect_uri与OIDC提供商后台配置的地址完全一致（即根URL），否则会导致认证失败。
• 使用replace: true是为了替换浏览器历史记录，避免用户点击后退时回到带参数的URL。

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