Question

我正在使用来自panz3r（Link to library）所有最新版本的keycloak-js和框架react-keycloak。

我的结构几乎与此处的示例相同：My project 我正在使用功能组件，并且我的App.tsx也用作容器->我在这里定义了所有状态，所有组件都需要它。

因此，我的应用程序如下所示（为简单起见对其进行了修改）：导入软件包

const App: React.FC = () => {
    const keycloakConfig = new (Keycloak as any)({
        realm: 'master',
        url: http://localhost:8280/auth/",
        clientId: 'reactPage',
    });

    const keycloakProviderInitConfig = {
        onLoad: 'check-sso',
    }


    const [data1, setData1] = useState<(Data[])>([]);
    const [data2, setData2] = useState<(Data | null)>(null);
    const [data3, setData3] = useState<(Data[])>([]);


    function onKeycloakEvent(event: any, error: any) {
        console.log('onKeycloakEvent', event, error)
        if (event === "onAuthSuccess") {
          setData1(Set anything);
        }
    }

    function onKeycloakTokens(tokens: any) {
        console.log('onKeycloakTokens', tokens)
    }

    return (
        <KeycloakProvider
            keycloak={keycloakConfig}
            initConfig={keycloakProviderInitConfig}
            onEvent={onKeycloakEvent}
            onTokens={onKeycloakTokens}
        >
            <Router history={myhistory}>
                <div className="App">
                    <MuiThemeProvider theme={theme}>
                        <React.StrictMode>
                            <RouterComponent
                                data1={data1}
                             data2={data2}
                             ...
                        </React.StrictMode>
                    </MuiThemeProvider>
                </div>
            </Router>
        </KeycloakProvider>
    );
};

export default App;

问题：一旦我修改了app.tsx容器中的任何数据，react将重新渲染该页面，并且身份验证将从头开始。现在我有一个无限循环。修改容器中的任何变量后，从哪里在容器（app.tsx）中设置任何数据都没有关系，我将完全重新呈现该应用程序并进行新的身份验证

Answer 1

我可以通过在App.tsx之前添加一个额外的层来解决我的问题。也许不是最好的解决方案，但它可行

react + keycloak + rerender强制进行新的身份验证

1 个答案: