使用 keycloak 保护特定的反应页面

Question

我正在将 Keycloak 的身份验证恶魔项目构建到一个反应项目中。 我有一个公共页面和一个私人页面。 私人页面检查用户是否已登录，并根据连接状态显示登录或注销按钮。这部分效果很好。当我单击登录按钮时，我被重定向到 Keycloak 门户。登录后，我被重定向到私人页面，我可以使用专用按钮退出。

但是当我导航到公共页面并返回私人页面时，或者只是刷新私人页面时，连接似乎已断开。然后我点击登录按钮，连接回来了，没有被重定向到 keycloak 门户。

那里有私人页面：

import React from "react";
import Nav from "../modules/Nav";
import RenderAnonymous from "../modules/RenderAnonymous";
import RenderAuthenticated from "../modules/RenderAuthenticated";
import UserService from "../services/UserService";

const Private = () => {
    return (
        <>
            <Nav/>
            <RenderAnonymous>
                <p>Il faut s'authentifier</p>
                <button onClick={UserService.doLogin} className="btn login-btn">Se connecter</button>
            </RenderAnonymous>
            <RenderAuthenticated>
                <p>User info</p>
                <button onClick={UserService.doLogout} className="btn login-btn">Déconnexion</button>
            </RenderAuthenticated>
            <div className="private">
                <h2>Page privée</h2>
            </div>
        </>
    );
};

export default Private;

RenderAnonymous 和 RenderAuthenticated 是相同的，除了身份验证条件：

import UserService from "../services/UserService";

const RenderAuthenticated = ({children}) => {
    if (UserService.isAuthenticated()) {
        return (children);
    }
    return null;
};


export default RenderAuthenticated;

用户服务：

import keycloak from "keycloak-js";

const KC = new keycloak("/keycloak.json");

const initKeycloak = (authenticatedCllback) => {
    KC.init({
        onLoad: "check-sso"
    }).then((auth)=>{
        if (auth) {
            console.info("Already logged in");
        } else {
            console.info("Need to log in");
        }
        authenticatedCllback();
    }).catch((err)=>{
        console.error(err);
    });
}

const doLogin = () => {
    return KC.login();
}

const doLogout = () => {
    return KC.logout();
}

const isAuthenticated = () => {
    return KC.authenticated;
}

const UserService = {
    initKeycloak,
    doLogin,
    doLogout,
    isAuthenticated,
};

export default UserService;

keycloak的初始化是从index.js启动的：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import UserService from "./services/UserService";

const renderApp = () => ReactDOM.render(<App/>,document.getElementById("root"));

UserService.initKeycloak(renderApp);

我不明白问题出在哪里... 是流量问题吗？ https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_implicit_flow

Answer 1

在我看来，您应该将 keycloak 对象（和 UserService）集成到反应处理中。目前它似乎不在您的<App/> 之外。

例如，您可以使用React context 来保存keycloak 实例。但是您不需要自己实现它。已经有一个名为react-keycloak 的库实现了这种方法。