javascript - How do I protect a path in React?

Question

I followed this page to create a React application and it worked fine.

However, when I added the following link:

 <li>
     <Link to='/protected/gg'>
         Link to Protected Page GG
     </Link>
 </li>

The word "GG" is shown without login when I browse the path /protected/gg.

It seems that the GuardedRoute can protect /protected path only.

So, is it possible to protect everything under /protected folder?

If so, would you tell me how to do so? Or give me a keyword so that I can google the solution.

Stackblitz of my work

question from:https://stackoverflow.com/questions/65897499/how-do-i-protect-a-path-in-react

Answer 1

Similar to other answer, but IMO a little simpler.

While you could just define a flat list of routes, some guarded and some not, you could create "walled guardens" (see what I did there).

Modify your GuardedRoute to conditionally render a Route or Redirect, passing all the other props through.

const GuardedRoute = ({ auth, ...rest }) => {
  return auth ? <Route {...rest} /> : <Redirect to="/" />;
};

Then simply make a "guarded" section in your router. Remember that order of routes within a Switch component matter, so order more specific paths before *less specific paths.

<Switch>
  <Route exact path="/" component={Home} />
  <GuardedRoute path="/protected" auth={isAutheticated}>
    <Switch>
      <Route path="/protected/gg" component={GG} />
      <Route path="/protected" component={Protected} />
    </Switch>
  </GuardedRoute>
  <Route path="/unprotected" component={Unprotected} />
</Switch>

I typically use codesandbox, but let me know if this forked stackblitz fails to load.

https://react-mjyp8g.stackblitz.io