Breaking News: Grepper is joining You.com. Read the official announcement!

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

Yucky Yak answered on March 3, 2022 Popularity 3/10 Helpfulness 1/10

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

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

Comment

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>
  );
};

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: handle javascript protected redirect routes url visited

Link to this answer
Share Copy Link

Contributed on Mar 03 2022

Yucky Yak

0 Answers Avg Quality 2/10

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

Contents

More Related Answers

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

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.