How to resolve promise before redirecting to Private Route in React?

Question

Use Case

I want to make async() call whenver user will try to visit private route. Generally synchronous methods are used while redirecting to private routes.

Here is my code I have used but not understanding how can I use asynchronous method with it.

class PrivateRoute extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isAdmin: null
    };
  }

  componentDidMount() {
    console.log("PrivateRoute");
    verifyUser().then(res => {
      this.setState({
        isAdmin: res
      });
    });
  }

  render() {
    const { component: Component, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props =>
          this.state.isAdmin === true ? (
            <InnerLayout>
              <Component {...props} />
            </InnerLayout>
          ) : this.state.isAdmin === null ? (
            <div>Loading...</div>
          ) : (
            <Redirect
              to={{ pathname: "/Login", state: { from: this.props.location } }}
            />
          )
        }
      />
    );
  }
}

export default PrivateRoute;

Problem with above code is componentDidMount() calls once. I have checked React routing and private routes Question and also checked Authenticate async with react-router-v4 question but both answers didn't work for me.

If I try to resolve promise in render then it shows following error:

How can I achieve this use case?

Aren't you using _redux_ in your project? – m.sohail Dec 03 '19 at 06:37 — m.sohail, Dec 03 '19 at 06:37
@AyushGupta what is HOC? – Rohit Sawai Dec 03 '19 at 06:43 — Rohit Sawai, Dec 03 '19 at 06:43
@m.sohail No I'm using React only. Have not used _redux_ – Rohit Sawai Dec 03 '19 at 06:44 — Rohit Sawai, Dec 03 '19 at 06:44

score 1 · Answer 1 · answered Dec 03 '19 at 06:42

You can use withRouter (https://reacttraining.com/react-router/web/api/withRouter)

class PrivateRoute extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isAdmin: null
        }
    }

    componentDidMount() {
        console.log('PrivateRoute');
        verifyUser().then(res => {
            if(!res){
             this.props.history.push('/Login')
           }else
            this.setState({
                isAdmin: res
            })
        });
    }

    render() {
        const { component: Component, ...rest } = this.props;
       if(this.state.isAdmin === null) return <div>Loading ...</div>
       return <Route {...rest} render={props => <InnerLayout><Component/></InnerLayout>}
    }
}

export default withRouter(PrivateRoute);

`componentDidMount()` method calls only once. After that whenever user click on other private routes, that method will not call. — Rohit Sawai, Dec 03 '19 at 06:47

score 0 · Answer 2 · answered Dec 03 '19 at 06:38

I think you wrap routes with components then wrap routes again, try to make statements and make different methods for your code, don't render methods.

<Route {...rest} render={props =>
                this.state.isAdmin === true ? (<InnerLayout><Component {...props} /></InnerLayout>) :
                    (this.state.isAdmin === null ? (<div>Loading...</div>) : 
                        (<Redirect to={{ pathname: '/Login', state: { from: this.props.location } }} />)) }/>
            );

make method :

verify = () => {

 ... your statement
}

and then call in render method

render () {
return {this.verify()}
}

Because sometimes statement on render not work fine.

score 0 · Accepted Answer · answered Dec 03 '19 at 08:13

For my use case componentWillReceiveProps() method worked perfectly. Following code I have added and which is worked for me.

componentWillReceiveProps() {
        verifyReceivedSign().then((res) => {
            this.setState({
                isAdmin: res
            })
        });
    }

You know more about componentWillReceiveProps() in the given link.

How to resolve promise before redirecting to Private Route in React?

3 Answers3