CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
The KNVB
The KNVB

Reputation: 3844

How do I protect a path in React?

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

Upvotes: 1

Views: 897

Answers (2)

Drew Reese
Drew Reese

Reputation: 203466

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

Upvotes: 1

Master Sh
Master Sh

Reputation: 24

You need to create a component to check the authentication of your protected routes and pass your component to it to check for the logged in or any other authorization state

App js will have only app route

import React from 'react';
import AppRoute from './components/Routes/appRoute'
const App = () => {
  return (
    <>
      <AppRoute></AppRoute>
    </>
  )
}

export default App

Below is the main Application route

import React from "react";
import { Switch, Route } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import Public from "Public";
import Private from "Private";
const AppRoute = () => {
  return (
    <Switch>
      <Route path="/public" exact component={Public}></Route>
      <ProtectedRoute
        exact
        path="/private"
        component={Private}
      ></ProtectedRoute>
    </Switch>
  );
};

export default AppRoute;

Auth checking component to check for login state

import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";

class ProtectedRoute extends Component {
  state = {
    isLoggedIn: true,
  };
  
  componentDidMount (){
//write code to check auth and update state to true or false 
  }

  render() {
    const { exact, path, component } = this.props;
    const { isLoggedIn } = this.state;
    return (
      <>
        {isLoggedIn ? (
          <>
//you can also change path as path={`/private/${path}`}
            <Route path={path} component={component} exact={exact} />
          </>
        ) : (
          <Redirect to={{ pathname: "/public" }} />
        )}
      </>
    );
  }
}
export default ProtectedRoute;

Upvotes: 0

Related Questions