使用 Keycloak 和 React 路由器在单个 Web 应用程序上同时拥有 public 和私有路由的最佳方法？

Question

我有一个网络应用程序，您必须经过身份验证才能查看内容。进入网站后，您首先看到的是 Login.js 中呈现的 Keycloak 登录页面，登录后，您可以访问 Routes.js 。现在我必须向同一个应用程序添加 public 路由，但我不确定如何继续。这是我目前所拥有的。

Index.js

  <Suspense fallback='loading'>
    <BrowserRouter>
      <PublicRoutes/>
    </BrowserRouter>
  </Suspense>

PublicRoutes.js

    return ( 
        <Switch>
            <Route exact path="/" render={() => <Redirect to="/signup"/>}
            />
            <Route exact path="/signup" render={() => <SignupPage header={HeaderNav}/>}
            />
            <Route exact path="/login" render={() => <Login/>}
            />
        </Switch>
    );

Login.js

if(this.state.keycloak) {
  if(this.state.authenticated) return (
    <Routes keycloak={this.state.keycloak}/>
  ); else return (<div>Unable to authenticate!</div>)
}
return (
  <div>Loading, please wait...</div>
);

Routes.js

        <Switch>
            <Route exact path="/" render={() => <Redirect to="/home"/>}
            />
            <Route exact path="/home" render={() => <HomePage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/catalog" render={() => <CatalogPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/query" render={() => <QueryPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/workshop" render={() => <WorkshopPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/dashboard/stats" render={() => <StatsPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/keys" render={() => <KeysPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/dashboard/consumption" render={() => <ConsumptionPage header={HeaderNav} sidebar={Sidebar} keycloak={this.props.keycloak}/>}
            />
            <Route exact path="/faq" render={() => <HelpPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Route exact path="/contact_us" render={() => <ContactPage header={HeaderNav} sidebar={Sidebar}/>}
            />
            <Redirect from="/login" to="/home"/>
        </Switch>

我想要的是 Routes.js 文件在用户通过身份验证后接管 PublicRoutes.js 文件。现在，当用户登录时，他仍然只能看到 public 路由内容。

Answer 1

尝试提升状态。也许Index.js可以在2台路由器之间切换？

如果需要

，您可以为 Login.js 传递状态（Keycloak 对象）或回调（handleLogin）

示例：

render() {
   const { keycloak, authenticated } = this.state;
   return 

   <div>
     {authenticated ? (
       <Secured keycloak={keycloak} />
      ) : (
       <Public handleLogin={this.handleLogin} />
     )}
   </div>
}

使用 Keycloak 和 React 路由器在单个 Web 应用程序上同时拥有 public 和私有路由的最佳方法？

Best way to proceed to have both public and private routes on a single web app using Keycloak and React router?

javascript

reactjs

react-router

keycloak