ReactJS + Vite中避免重复实例化UserManager的方法

核心思路 #

要解决这个问题，关键是让整个应用共享同一个UserManager实例，这样对应的IndexedDbDPoPStore和DPoP密钥对只会初始化一次，页面刷新后也能复用原有密钥，避免因新密钥导致的DPoP验证失败。

方案1：模块单例模式（推荐） #

利用ES模块的单例特性，在单独的工具文件中实例化UserManager并导出，所有组件导入的都是同一个实例。

创建src/utils/auth.ts文件：

import { UserManager, UserManagerSettings } from 'oidc-client-ts';

const authSettings: UserManagerSettings = {
  authority: '你的认证服务地址',
  client_id: '你的客户端ID',
  redirect_uri: `${window.location.origin}/callback`,
  response_type: 'code',
  scope: 'openid profile email',
  dPoP: true, // 启用DPoP
  // 其他配置项根据你的需求补充
};

// 仅创建一次UserManager实例
const userManager = new UserManager(authSettings);

export default userManager;

组件中直接导入使用：

import userManager from '../utils/auth';

// 示例：获取当前用户信息
const fetchCurrentUser = async () => {
  const user = await userManager.getUser();
  // 处理用户逻辑
};

方案2：React Context 封装 #

如果需要在组件树中统一管理认证实例，或者结合React状态使用，可以用Context包裹UserManager实例：

创建src/contexts/AuthContext.tsx：

import { createContext, useContext, ReactNode } from 'react';
import { UserManager, UserManagerSettings } from 'oidc-client-ts';

const authSettings: UserManagerSettings = {
  // 同方案1的配置内容
};

const userManager = new UserManager(authSettings);

const AuthContext = createContext<UserManager>(userManager);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  return <AuthContext.Provider value={userManager}>{children}</AuthContext.Provider>;
};

export const useAuth = () => useContext(AuthContext);

在App根组件中包裹：

import { AuthProvider } from './contexts/AuthContext';

function App() {
  return (
    <AuthProvider>
      {/* 应用所有子组件 */}
    </AuthProvider>
  );
}

组件中通过自定义Hook获取实例：

import { useAuth } from '../contexts/AuthContext';

const LoginButton = () => {
  const userManager = useAuth();

  const handleLogin = async () => {
    await userManager.signinRedirect();
  };

  return <button onClick={handleLogin}>登录</button>;
};

关于全局变量的疑问 #

你考虑的全局变量思路本质和模块单例一致，但直接挂在window对象上会污染全局命名空间，而模块单例是ES规范内的实现，更安全且符合React项目的代码组织习惯，是更优的选择。

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