react-oidc-context：关闭浏览器后需重登，求自动登录配置示例

要解决关闭浏览器后强制重登的问题，核心是调整存储策略和自动静默登录配置，以下是完整的实现步骤和代码示例：

1. 核心配置修改 #

react-oidc-context 默认用 sessionStorage 存储令牌，关闭浏览器后数据会被清除。要改成 localStorage 持久化存储，同时开启静默自动登录功能。

创建自定义 UserManager 配置 #

import { UserManager, WebStorageStateStore } from 'oidc-client-ts';
import { AuthProvider } from 'react-oidc-context';

const oidcConfig = {
  // 你的授权服务器地址
  authority: 'https://your-auth-server.com',
  // 客户端ID
  client_id: 'your-client-id',
  // 登录成功后的回调地址
  redirect_uri: window.location.origin + '/callback',
  // 静默登录回调地址（需在授权服务器配置允许）
  silent_redirect_uri: window.location.origin + '/silent-callback',
  // 响应类型，需包含id_token和token
  response_type: 'id_token token',
  // 申请的权限范围
  scope: 'openid profile email',
  // 令牌过期后自动刷新
  automaticSilentRenew: true,
  // 检查令牌状态的间隔（毫秒）
  checkSessionInterval: 30000,
  // 改用localStorage持久化存储令牌
  userStore: new WebStorageStateStore({ store: window.localStorage })
};

const userManager = new UserManager(oidcConfig);

// 在App入口使用AuthProvider
function App() {
  return (
    <AuthProvider userManager={userManager}>
      {/* 你的应用组件 */}
      <YourAppContent />
    </AuthProvider>
  );
}

export default App;

2. 实现静默登录回调页面 #

需要创建一个 silent-callback.html 放在项目的 public 目录下，用于处理静默登录的回调：

<!DOCTYPE html>
<html>
<body>
  <script>
    // 调用oidc-client的静默登录回调处理
    window.onload = function () {
      new Oidc.UserManager().signinSilentCallback().catch(err => {
        console.error('静默登录失败:', err);
      });
    };
  </script>
</body>
</html>

3. 应用加载时触发自动登录 #

在应用初始化时，尝试自动静默登录，避免用户手动触发：

// 可以在App组件的useEffect中执行
import { useOidc } from 'react-oidc-context';
import { useEffect } from 'react';

function YourAppContent() {
  const { signinSilent, isAuthenticated } = useOidc();

  useEffect(() => {
    // 如果未认证，尝试静默登录
    if (!isAuthenticated) {
      signinSilent().catch(err => {
        // 静默登录失败（比如令牌过期或不存在），再引导用户手动登录
        console.log('静默登录失败，需手动登录:', err);
      });
    }
  }, [isAuthenticated, signinSilent]);

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

关键配置说明 #

• userStore: new WebStorageStateStore({ store: window.localStorage })：替换默认的sessionStorage，让令牌在浏览器关闭后依然保留
• automaticSilentRenew: true：令牌即将过期时自动发起静默刷新，保持登录状态
• silent_redirect_uri：必须在授权服务器的允许回调列表中配置，否则静默登录会被拦截
• checkSessionInterval：定期检查令牌有效性，确保状态同步

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