ReactJS集成IdentityServer4路由问题：回调页面无法跳转

看起来你遇到的正是redux-oidc旧版本里的经典路径匹配问题，结合你提到的Issue#96和技术栈版本，我整理了几个针对性的解决方案，你可以逐一排查：

• 确保oidc-client配置的redirectUri完全匹配回调路由
  这是最容易出错的点，你需要在userManager的配置里明确写死回调地址，比如：

  const oidcConfig = {
    authority: '你的IdentityServer4地址',
    client_id: '你的客户端ID',
    // 必须精确到/callback，带上当前域名
    redirect_uri: `${window.location.origin}/callback`,
    response_type: 'code',
    scope: 'openid profile api',
    post_logout_redirect_uri: `${window.location.origin}/`
  };
  const userManager = new UserManager(oidcConfig);
  

  绝对不能省略域名部分，也不能拼写错误（比如把callback写成call）。

• 检查redux-oidc的OidcProvider回调路由配置
  在包裹应用的OidcProvider组件里，必须指定callbackRoute参数为你的回调页面路径：

  <OidcProvider store={store} userManager={userManager} callbackRoute="/callback">
    <BrowserRouter>
      {/* 你的应用路由 */}
      <Route path="/callback" component={CallbackPage} />
      {/* 其他路由 */}
    </BrowserRouter>
  </OidcProvider>
  

  这里的callbackRoute和路由里的/callback必须完全一致，redux-oidc会依赖这个参数处理登录后的重定向。

• 排查react-router的路由匹配顺序和规则
  在react-router-dom@4.x中，路由是按顺序匹配的，确保你的/callback路由没有被其他模糊匹配的路由抢占。比如如果有一个<Route path="/call" component={SomeComponent} />在/callback路由之前，就会导致匹配错误。调整路由顺序，把/callback放在更靠前的位置，并且不需要加exact属性（因为回调时会带上查询参数，exact会导致匹配失败）。

• 清除旧会话数据
  浏览器缓存的旧OIDC会话数据可能会导致重定向路径异常。打开开发者工具，清除localStorage、sessionStorage里的oidc相关数据，然后重启应用重新测试。

• 针对Issue#96的额外处理
  这个issue里提到的问题根源是旧版本redux-oidc在处理redirectUri时，如果配置有误会默认 fallback到/call。你可以手动在CallbackPage组件里添加日志，打印window.location.href，看看登录成功后IdentityServer4返回的redirectUri到底是什么，确认是否是后端客户端配置里的redirectUri写错了——别忘了检查IdentityServer4的客户端配置，确保那里的RedirectUris也包含http(s)://你的域名/callback，后端配置错误也会导致前端重定向异常。

如果以上步骤都试过还是不行，考虑是否是版本兼容性问题：react-router-dom@4.3.1和redux-oidc@3.1.4理论上兼容，但你可以尝试升级oidc-client到稍新的版本（比如1.11.x），但注意不要跨版本太大，避免引入新的兼容问题。

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