使用密钥斗篷保护特定的反应页面

Question

我正在将一个带有 Keycloak 的身份验证恶魔项目构建到一个 React 项目中。我有一个 public 页面和一个私人页面。私有页面检查用户是否登录并显示一个按钮来登录或注销，具体取决于连接状态。这部分效果很好。当我点击登录按钮时，我被重定向到 Keycloak 门户。登录后，我被重定向到私人页面，我可以使用专用按钮注销。

但是当我导航到 public 页面并返回私人页面，或者只是刷新私人页面时，连接似乎断开了。然后我点击登录按钮，连接又回来了，没有被重定向到 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）集成到 React 处理中。目前它似乎住在你的 <App/>.

之外

例如，您可以使用实现此方法的 React context to hold the keycloak instance. But you do not need to implement this yourself. There is already a library called react-keycloak。

使用密钥斗篷保护特定的反应页面

Secure specific react page using keycloak

reactjs

keycloak

keycloak-connect