CODEWITHSUNDEEP
reactjsadminrefluxjs
zero
zero

Reputation: 3082

creating "gated" react components

so I have an app that is using Reflux router and I want to create admin only areas in the app. what I'm trying to achieve is when a user goes to a gated part of the app that part of the app will make an API call to check of the user is authorized to access that component (via a token that is read on the server) and if they are not authorized then it will re-direct them to the login component.

but I've run into a conundrum with best practices within react. react says that ajax (or in this case an API call) should be done in componentDidMount rather than componentWillMount, but from my understanding about the react life cycle if I follow their best practice then the component would/could be rendered before the user is authenticated which is extremely undesirable especially if the server latency is not fast enough.

What is the best way to handle something like this within react?

Upvotes: 1

Views: 340

Answers (1)

azium
azium

Reputation: 20614

You don't need to make the ajax request on the exact component you want to display after the token is approved, it can be any component, such as one that wraps the private information.

class AuthWrapper extends Component {
  componentDidMount() {
    ajax(url).then(token => {
      if (token) this.setState({ token })
      else redirect()
    })
  }

  render() {
    return (
      <div>
        {this.state.token && this.props.children}
        {!this.state.token && <div>Fetching...</div>}
      </div>
    )
  }
}

Then somewhere else:

<AuthWrapper>
  <YourPrivateComponent />
<AuthWrapper>

Upvotes: 1

Related Questions