Redux OIDC回调被调用两次问题排查求助

看起来你遇到的问题是回调组件被两次调用，第一次正常进入成功回调，第二次触发错误回调后页面冻结在/callback路径。结合你提供的代码和redux-oidc的使用场景，我整理了几个可能的原因和对应的解决思路：

先贴出你的相关代码方便参考 #

App 容器组件 #

class App extends React.Component { 
  componentDidMount() { 
    if (this.props.location && this.props.location.pathname != '/callback') { 
      userManager.getUser().then(response => { 
        if (!response || response.expired) { 
          userManager.signinRedirect(); 
        } else{ 
          this.props.dispatch(userFound(response)); 
        } 
      }); 
    } 
  } 
  render() { 
    return ( 
      <div> 
        <Switch> 
          <PrivateRoute exact path="/" component={HomePage} user={this.props.user} /> 
          <PrivateRoute exact path="/dashboard" component={Dashboard} user={this.props.user} /> 
          <Route exact path="/callback" component={CallbackPage} /> 
          <Route component={NotFoundPage} /> 
        </Switch> 
      </div> 
    ); 
  } 
} 

CallbackPage 组件 #

class CallbackPage extends React.Component { 
  render() { 
    // just redirect to '/' in both cases 
    return ( 
      <CallbackComponent 
        userManager={userManager} 
        successCallback={() => this.props.dispatch(push("/"))} 
        errorCallback={error => { 
          this.props.dispatch(push("/")); 
          console.error(error); 
        }} 
      > 
        <div>Redirecting...</div> 
      </CallbackComponent> 
    ); 
  } 
} 

PrivateRoute 组件 #

const PrivateRoute = ({ component: Component, user, ...rest }) => ( 
  <Route {...rest} render={props => ( 
    user ? ( 
      <Component {...props} /> 
    ) : ( 
      <Redirect to={{ pathname: '/notFoundPage', state: { from: props.location } }} /> 
    ) 
  )} /> 
); 
export default PrivateRoute; 

Store 配置 #

export default function configureStore(initialState = {}, history) { 
  const middlewares = [ 
    sagaMiddleware, 
    routerMiddleware(history), 
  ]; 
  const enhancers = [ 
    applyMiddleware(...middlewares), 
  ]; 
  const composeEnhancers = process.env.NODE_ENV !== 'production' && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ 
        shouldHotReload: false, 
      }) 
    : compose; 
  const store = createStore( 
    createReducer(), 
    fromJS(initialState), 
    composeEnhancers(...enhancers) 
  ); 
  store.runSaga = sagaMiddleware.run; 
  store.injectedReducers = {}; 
  store.injectedSagas = {}; 
  loadUser(store, userManager); 
  return store; 
} 

可能的原因及解决步骤 #

1. React Strict Mode 导致的重复渲染（开发环境常见） #

React 16.3+的Strict Mode会在开发模式下刻意重复调用render、componentDidMount等生命周期方法，用来检测组件中的潜在问题。如果你的应用被包裹在<React.StrictMode>中，这很可能是CallbackPage两次渲染的元凶。

解决方法：
暂时移除根组件外层的<React.StrictMode>，重启应用后观察问题是否消失。如果确实是这个原因，你需要确保userManager相关的逻辑是幂等的（重复执行也不会产生副作用），或者在组件中加入状态标记，避免重复处理回调：

// 在CallbackPage中加入状态控制
class CallbackPage extends React.Component {
  state = {
    hasProcessedCallback: false
  };

  componentDidMount() {
    this.setState({ hasProcessedCallback: true });
  }

  render() {
    if (this.state.hasProcessedCallback) {
      return <div>Redirecting...</div>;
    }
    return (
      <CallbackComponent 
        userManager={userManager} 
        successCallback={() => this.props.dispatch(push("/"))} 
        errorCallback={error => { 
          this.props.dispatch(push("/")); 
          console.error(error); 
        }} 
      >
        <div>Redirecting...</div>
      </CallbackComponent>
    );
  }
}

2. userManager 不是单例实例 #

如果你的userManager是在组件内部（比如CallbackPage或App组件）每次渲染时创建的，会导致多个实例同时处理回调：第一个实例处理成功后，第二个实例再处理时已经没有有效的授权信息，从而触发错误回调。

解决方法：
把userManager抽成全局单例，单独放在一个文件中导出，确保所有组件使用同一个实例：

// src/utils/userManager.js
import { UserManager } from 'oidc-client';

const oidcConfig = {
  // 你的OIDC配置（比如authority、client_id等）
};

const userManager = new UserManager(oidcConfig);

export default userManager;

然后在所有需要使用的组件中导入这个单例，而不是重新创建。

3. App组件与CallbackComponent的逻辑冲突 #

你的App组件在componentDidMount中会检查路由并调用userManager.getUser()，而CallbackComponent本身也会处理回调逻辑。当路由切换到/callback时，App组件的逻辑可能还在执行，和CallbackComponent的处理产生冲突。

解决方法：
修改App组件的componentDidMount逻辑，确保完全跳过/callback路由的处理：

componentDidMount() {
  // 使用可选链操作符更严谨
  if (this.props.location?.pathname !== '/callback') {
    userManager.getUser().then(response => {
      if (!response || response.expired) {
        userManager.signinRedirect();
      } else {
        this.props.dispatch(userFound(response));
      }
    });
  }
}

同时，检查loadUser方法（在Store初始化时调用的），确保它不会在/callback路由下执行：

// 修改loadUser方法，加入路由判断
export const loadUser = (store, userManager, history) => {
  if (history.location.pathname !== '/callback') {
    userManager.getUser().then(user => {
      if (user) {
        store.dispatch(userFound(user));
      }
    });
  }
};

然后在configureStore中传递history给loadUser：

loadUser(store, userManager, history);

4. PrivateRoute的重定向逻辑不合理 #

你的PrivateRoute在用户未登录时会重定向到/notFoundPage，但在回调流程中，用户状态可能还未更新，导致路由跳转到404后又触发其他逻辑，最终引发冲突。

解决方法：
将PrivateRoute的重定向目标改为首页（或登录入口），避免不必要的404跳转：

const PrivateRoute = ({ component: Component, user, ...rest }) => (
  <Route {...rest} render={props => (
    user ? (
      <Component {...props} />
    ) : (
      <Redirect to={{ pathname: '/', state: { from: props.location } }} />
    )
  )} />
);

建议你先从Strict Mode和userManager单例这两点入手排查，这是这类问题最常见的诱因。如果问题仍然存在，可以在浏览器的DevTools中查看路由变化记录、Redux的action日志，或者给userManager的相关方法加日志，追踪两次回调的触发源。

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