一个Keycloak实例只能初始化一次

Question

我在 React 中使用 Keycloak 来验证用户身份，当我使用 时，出现以下错误：

无法初始化适配器：错误：“Keycloak”实例只能初始化一次。

首先，我在组件中、最高层、useEffect 之外定义了 Keycloak 实例。 然后我在一个单独的文件中创建了 Keycloak 配置，如下所示，并将其插入组件中，问题仍然存在。

Keycloak 配置文件

import Keycloak from 'keycloak-js';

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

export default keycloak;

组件

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

function Management() {
    const [authenticated, setAuthenticated] = useState(false);
    const [userRoles, setUserRoles] = useState([]);
    const [fullName, setFullName] = useState('');

    useEffect(() => {
        const initKeycloak = async () => {
            try {
                const authenticated = await keycloak.init({ onLoad: 'check-sso', initOptions: { pkceMethod: 'S256', checkLoginIframe: false } });
                console.log(`User is ${authenticated ? 'authenticated' : 'not authenticated'}`);
                setAuthenticated(authenticated);

                if (authenticated) {
                    const token = keycloak.token;
                    const decodedToken = jwtDecode(token);
                    const roles = decodedToken.realm_access.roles;
                    const name = decodedToken.name
                    setUserRoles(roles);
                    setFullName(name);
                }
            } catch (error) {
                console.error('Failed to initialize adapter:', error);
            }
        };

        initKeycloak();
    }, []);

    const handleLogout = () => {
        keycloak.logout();
    };

    const handleLogin = () => {
        keycloak.login();
    };

    return (
        <div className="panel app">
            <div className="sidebar">
                <NavLink to={"/"}> Welcome ! </NavLink>
                <NavLink to={"/managment"}> Project Information </NavLink>
                <NavLink to={"managment/user"}> User </NavLink>
                <NavLink to={"managment/groups"}> Groups </NavLink>
            </div>
            <div className="content">
                {authenticated ? (
                    <Outlet />
                ) : (
                    <p>You do not have permission to access this content!</p>
                )}
            </div>
            <div className="user-info">
                {authenticated ? (
                    <>
                        <h3>{fullName}</h3>
                        <h5>User Roles:</h5>
                        <ul>
                            {userRoles.map((role, index) => (
                                <li key={index}>{role}</li>
                            ))}
                        </ul>
                        <button className="logOut" onClick={handleLogout}>Log Out</button>
                    </>
                ) : (
                    <button className="logOut" onClick={handleLogin}>Log In</button>
                )}

            </div>
        </div>
    );
}

export default Management;

我在 React 中使用 Keycloak 来验证用户身份。

Answer 1

我想我在下面的帖子中找到了我的问题的答案。 https://stackoverflow.com/a/72585970/9897918

React 18 现在具有 Strict.Mode，它可以挂载、卸载和重新挂载组件，这会导致 abortController 在第一次卸载时发出错误。请记住，这只发生在开发模式下，即在 index.js 中应用 Strict.Mode 时。我们可以在开发模式下检查该行为。 https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state