JAVASCRIPT

How to handle protected routes in React plus redirect user to original URL being visited

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

export const ProtectedRoute = ({ role, ...rest }) => {
  const currentRole = JSON.parse(localStorage.getItem("role"));
  if (currentRole === role) {
    return <Route {...rest} />;
  } else {
    return (
      <Redirect
        to={{
          pathname: currentRole ? "/" : "/login",
          state: {
            from: rest.location
          }
        }}
      />
    );
  }
};


// Login Component (handled redirection to the URL being accessed)
import { useHistory, useLocation } from "react-router-dom";

const Login = () => {
  const history = useHistory();
  const { state } = useLocation();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = (email, password) => {
    const user = loginData.find(
      (el) => el.email === email && el.password === password
    );

    if (user) {
      localStorage.setItem("role", JSON.stringify(user.access));
      history.replace(state.from ?? "/");
    } else {
      console.error("no user match found!");
    }
  };

  return (
    <div>
      ....
    </div>
  );
};