5

Requirement:

If a user applied to a job, pass a flag of applied_job flag to the backend, then bring the user to the jobs page, preventing user from accessing to other pages if the applied_job flag is true. Even if the user refresh the page, still redirect the user to the jobs page if the applied_job flag is true.

The problem is I use a higher order function or higher order component to do my route protection, I don't see how can I call the api to get the flag.

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => {
            return (
                true //assume this flag is from server, how to do an api call here??
          ? <Redirect to='/jobs' {...props} />
                    : <Component {...props} />
            )
    }} />
)

https://codesandbox.io/s/6rrlz3xpz

If I do it outside, where should I make the call? I can store the flag in the localstorage, but if so the user can delete it from the client which is not right too.

Jamie Aden
  • 943
  • 2
  • 12
  • 20
  • You can refer this https://stackoverflow.com/questions/47627818/performing-authentication-on-routes-with-react-router-v4/47628941#47628941 – Shubham Khatri Apr 07 '18 at 07:03
  • oh ok thanks for that link, I can call outside and pass a prop to the protected higher order component. – Jamie Aden Apr 07 '18 at 07:13

0 Answers0