The best way to manage authentication and redirection of user based on his/her role

help
1

Hy,

To manage redirection of the user, I use this code

export class Home extends React.Component {

constructor(props, context){
super(props, context);
this.State = {};
}

getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}

ManageAuthentication(){

if (!this.props.isAuthenticated) {

  var loggedInUser = this.props.userId;
  let currentUser = this.props.currentUser;


 if (currentUser.profile.role !== 'user') {

     if (currentUser.profile.role === 'pro') {
             let exist = Roles.userIsInRole(loggedInUser, ['pro'], 'typeOfUser' );
             if (!exist) {Meteor.call('addRole',loggedInUser, 'pro');};
            Router.browserHistory.push('/EspaceProfessional');

     } else if (currentUser.profile.role === 'admin') {

            let exist = Roles.userIsInRole(loggedInUser, ['admin'], 'typeOfUser' );
            if (!exist) {Meteor.call('addRole',loggedInUser, 'admin');};
          Router.browserHistory.push('/EspaceAdmin');

     }else{

       Router.browserHistory.push('/log');
     };

    }else if (currentUser.profile.role === 'user') {

          let exist = Roles.userIsInRole(loggedInUser, ['user'], 'typeOfUser' );
          if (!exist) {Meteor.call('addRole',loggedInUser, 'user')};  
       return <div>{this.props.children}</div>;
    };


  }else{
     Router.browserHistory.push('/log');
  };

}

render(){
if (!this.props && !this.props.isAuthenticated || !this.props.currentUser && !this.props.isAuthenticated) {
return


wait…


<CircularProgress size={119} thickness={7} style={{margin: 10.5}} />

} 
  return (
       <Grid fluid>
         <Row className="show-grid" >
             <Col xs={12} sm={12} md={12} lg={12} style={Styles.col} >
                <Nav />
             </Col>
             <Col xs={12} sm={12} md={12} lg={12} style={Styles.col}>
                {this.ManageAuthentication()}
             </Col>
          </Row>
      </Grid>

    );

}
};

Home.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};

export default withTracker(props => {
return {
isAuthenticated: Meteor.userId() === null,
currentUser: Meteor.user(),
userId: Meteor.userId(),
};
})(Home);

How can you suggest me to improve it (it’s slow)?
what’s the best way to manage authentication ?

Thank’s

2

In our apps we use a switch statement to return a different component based on the role of the user so that we don’t have to send them to a different route.

FYI, you can get a user’s roles with Roles.getRolesForUser. This would keep you from duplicating the role property in profile. Right now you’re checking roles twice. If you want to have it in both places it would be easier to set the role using a login hook. See docs here

3

Thank’s for reply

Can You show me an example about how to switch them, please?

Thank’s

4

In our app, users only ever have one role, so our render block looks like this:

render() {
  switch(this.props.role) {
    case 'admin':
      return <AdminHome />;
    case 'regular':
      return <Home />;
  }
}
1 Like