Protected routes behave weird when manually loaded on the browser

Question

I was reading answers for protected routes(routes which should only be accessed by authenticated users) and found common approach that most people do => https://stackoverflow.com/a/43171515/10117691

I tried the same in my project.

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

Routes looks like

<Route path='/login' component={Login} />
<PrivateRoute authed={props.Isloggedin} path='/dashboard' component={Dashboard} />

The protected routes works fine, it redirects from /dashboard to /login if the user is not authenticated(when props.Isloggedin is false).

I get Isloggedin data from redux state. The problem I am facing is => When a user is logged in, manually load /dashboard on the browser, it redirects to /login instead of letting me in the same page.

When I did some troubleshooting, initialstate of redux has 'Isloggedin:false', the state changes to true/false after a token analysis is done.

Looks PrivateRoute component only processes the initialstate of 'Isloggedin', it doesn't process the changed value of 'Isloggedin' which comes in second.

Does anyone face this and know what to do here?

Protected routes behave weird when manually loaded on the browser

0 Answers0