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

Question

I had a web app where you had to be authentified to see the content. First thing you saw entering the website was the Keycloak login page rendered in Login.js , once you were logged in, you had access to Routes.js . Now I have to add public routes to this same application and I'm not sure how to proceed. Here's what I have so far.

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>

What I'd like is that the Routes.js file takes over the PublicRoutes.js file when the user is authentified. Right now, when the user logs in, he can still only see the public routes content.

Answer 1

Try lifting state up. Maybe Index.js can switch between 2 sets of routers?

You can pass state (Keycloak object) or callbacks (handleLogin) for Login.js if you need to

Example:

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

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