React中Keycloak初始化报错：‘Keycloak实例仅能初始化一次’

React StrictMode在开发环境中会重复执行组件的挂载逻辑（包括useEffect），目的是检测潜在的副作用问题。你的Keycloak实例是全局导出的单例对象，第一次useEffect执行时已经完成初始化，第二次执行时再次调用初始化方法，触发了Keycloak的单例初始化限制，导致报错。

方案1：给Keycloak实例添加初始化状态标记 #

修改keycloakConfig.js，给实例增加初始化状态标记，确保只初始化一次：

import Keycloak from 'keycloak-js';

const keycloakConfig = {
    url: 'http://192.168.12.231:8080/auth/',
    realm: 'MyRelm',
    clientId: 'client',
};
const keycloak = new Keycloak(keycloakConfig);

// 添加初始化状态标记
keycloak.isInitialized = false;

export default keycloak;

在Management组件的useEffect中判断状态后再执行初始化：

useEffect(() => {
  if (!keycloak.isInitialized) {
    keycloak.init({ onLoad: 'login-required' })
      .then(authenticated => {
        // 处理认证结果
        keycloak.isInitialized = true;
      })
      .catch(err => console.error('Keycloak初始化失败:', err));
  }
}, []);

方案2：使用React Ref跟踪初始化状态 #

在组件内部用useRef记录是否已执行初始化，Ref在StrictMode的双重渲染中不会被重置：

import React, { useState, useEffect, useRef } from "react";
import { NavLink, Outlet } from "react-router-dom";
import keycloak from "../keycloakConfig";
import { jwtDecode } from "jwt-decode";

function Management() {
  const isInitialized = useRef(false);

  useEffect(() => {
    if (!isInitialized.current) {
      keycloak.init({ onLoad: 'login-required' })
        .then(authenticated => {
          // 处理认证逻辑
          isInitialized.current = true;
        })
        .catch(err => console.error('Keycloak初始化失败:', err));
    }
  }, []);

  // 其他业务代码...
}

方案3：封装Keycloak初始化逻辑为自定义Hook #

把初始化逻辑封装成全局唯一的自定义Hook，避免重复执行：

// useKeycloak.js
import { useEffect, useRef, useState } from 'react';
import keycloak from './keycloakConfig';

export function useKeycloak() {
  const [authenticated, setAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);
  const hasInitialized = useRef(false);

  useEffect(() => {
    if (!hasInitialized.current) {
      keycloak.init({ onLoad: 'login-required' })
        .then(auth => {
          setAuthenticated(auth);
          hasInitialized.current = true;
        })
        .catch(err => console.error('Keycloak初始化失败:', err))
        .finally(() => setLoading(false));
    }
  }, []);

  return { keycloak, authenticated, loading };
}

在Management组件中使用该Hook：

import { useKeycloak } from './useKeycloak';

function Management() {
  const { keycloak, authenticated, loading } = useKeycloak();

  if (loading) {
    return <div>加载中...</div>;
  }

  // 渲染业务组件...
}

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