React应用中oidc-client-js令牌刷新时查询参数不一致问题

云上老周

2026-7-4

问题解决：oidc-client-js刷新令牌时redirect_uri携带旧查询参数

问题背景

使用oidc-client-js 1.11.5管理React应用认证时，首次打开应用的redirect_uri能正确携带当前查询参数跳转，但调用signinRedirect刷新令牌时，始终使用初始化UserManager时的旧查询参数——哪怕用户导航后查询参数已经变化。试过signinRedirectCallback(url)也没能解决问题。

问题根源

你在初始化UserManager时，直接把redirect_uri硬编码成了当时的window.location.search值，这个配置在实例创建后就固定死了。后续用户导航导致查询参数变化时，UserManager实例的配置不会自动更新，所以每次调用signinRedirect都会沿用最初的旧redirect_uri。

解决方案

不要在UserManager初始化时固定redirect_uri，而是每次调用signinRedirect时动态传入最新的redirect_uri参数，覆盖实例的默认配置。

修改后的代码示例

authService.js

保留UserManager的基础配置，只留redirect_uri的基础路径，查询参数后续动态添加：

import { UserManager } from 'oidc-client';

const authServiceConfig = {
  // 其他配置项...
  redirect_uri: `${window.location.origin}/callback`, // 仅保留基础路径
};

const userManager = new UserManager(authServiceConfig);

auth-context-provider.jsx

调用signinRedirect时，生成包含当前最新查询参数的redirect_uri并传入：

useEffect(() => {    
  // 其他逻辑...

  const timeout = setTimeout(() => {
    console.debug('***  Token update');
    setIsLoggedIn(false);
    // 动态生成带当前查询参数的redirect_uri
    const currentRedirectUri = `${window.location.origin}/callback${window.location.search || ''}`;
    userManager.signinRedirect({ redirect_uri: currentRedirectUri });
  }, timeoutDelay);

  // 清理定时器逻辑...
}, [authPayload, search]);