React中OIDC的signinSilent()触发页面刷新，如何实现静默续期？

1. 补充缺失的OIDC配置项 #

你的现有配置缺少静默续期必需的回调地址，且未开启自动续期逻辑，这是触发页面刷新的核心原因。修改配置如下：

const oidcConfig = {
    authority: authConfig.authority,
    client_id: authConfig.client_id,
    redirect_uri: authConfig.redirect_uri,
    // 添加静默续期回调地址，指向项目public目录下的空白页面
    silent_redirect_uri: `${window.location.origin}/silent-renew.html`,
    scope: "openid offline_access",
    // 开启自动静默续期，无需手动调用signinSilent
    automaticSilentRenew: true,
    // 可选：设置令牌过期前的提前续期时间（单位：毫秒）
    accessTokenExpiringNotificationTime: 60000,
};

2. 创建静默回调页面 #

在项目public目录下新建silent-renew.html，仅需处理OIDC客户端的回调逻辑，无需复杂内容：

<!DOCTYPE html>
<html>
  <body>
    <script>
      window.onload = function () {
        // 适配路由参数格式，触发静默续期回调
        window.location.href = window.location.href.replace(/#/g, '?');
        if (window.Oidc?.UserManager) {
          window.Oidc.UserManager.signinSilentCallback().catch(err => console.error('静默续期回调失败:', err));
        }
      };
    </script>
  </body>
</html>

3. 简化组件逻辑 #

开启automaticSilentRenew后，库会自动处理令牌过期前的静默续期，无需手动绑定事件调用signinSilent。只需监听令牌更新事件同步请求头即可：

import { useAuth } from "react-oidc-context";
import React from "react";

const MyComponent: React.FC<MyComponentProps> = () => {
    const auth = useAuth();

    // 令牌更新时自动重置请求头
    React.useEffect(() => {
        if (auth.user?.access_token) {
            console.log('令牌已更新，同步请求头', auth.user.access_token);
            // 这里执行请求头重置逻辑
        }
    }, [auth.user]); // auth.user变化即代表令牌更新

    return <div>组件内容</div>;
}

关键说明 #

• silent_redirect_uri必须指向同源下的空白页面，OIDC服务会通过iframe请求该地址完成续期，不会刷新主页面。
• automaticSilentRenew开启后，库会自动监听令牌过期状态，在令牌即将失效时发起静默续期请求，避免手动调用的重复操作。
• 通过auth.user的变化监听令牌更新，确保请求头能及时同步最新令牌。

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