How to use role based authentication on client side reactjs?

Question

I have created 2 components one is login form and other component displays table with some random data generated through faker.js After user login, table component with some data is displayed. That component also has 2 buttons on top right corner so I want to show those buttons only if user === ADMIN if user === USER then I don't want to show those 2 buttons. How can I do this ? Should I create a separate component excluding those 2 buttons ?

Login.js:

import React, {Component} from "react";
import { Button, Form, Header } from "semantic-ui-react";
import './loginForm.css';

class LoginForm extends Component {

    state = {}

    handleChange = (e, { name, value }) => this.setState({ [name]: value })

    handleSubmit = () => {
      this.setState({ urnNumber: '', password: '' })  
      this.props.history.push('/user')
    }

    render() {
        const { urnNumber, password } = this.state 

        return(
          <Form className="formStyle" onSubmit={this.handleSubmit}>
            <Header className="title" as='h1'>Account Portal Login</Header>
            <Header className="info" as='h5'>Please login with your URN number. If you have not been assigned a
            password, you can create one below and login afterwards</Header>
            <Header className="info" as='h4'>Please login below</Header>
            <Form.Field>
              <Form.Input label="URN number" value={urnNumber} placeholder="Enter URN number" onChange={this.handleChange}/>
            </Form.Field>
            <Form.Field>
              <Form.Input label="Password" value={password} placeholder="Enter password" onChange={this.handleChange}/>
            </Form.Field>
            <Button className="loginButton">Login</Button>
          </Form>
        )
    }
};

export default LoginForm;

TableComponent.js:

const RemittancePage = () => (
    <Grid className={styles.container}>
        <Grid.Row>
            <Grid.Column width={11}>
                <Header as='h2' className={styles.title}>Remittance Page</Header>
            </Grid.Column>
            <Grid.Column floated='right' width={5}>
                <Button primary className={styles.formButton}>Remittance</Button>
                <Button primary className={styles.reportButton}>Generate Report + </Button>
            </Grid.Column>
        </Grid.Row>
        <Grid.Row>
            <Grid.Column width={16}>
                <Table celled selectable className={styles.remittanceForm}>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>ID</Table.HeaderCell>
                            <Table.HeaderCell>Name</Table.HeaderCell>
                            <Table.HeaderCell>URN number</Table.HeaderCell>
                            <Table.HeaderCell>Parishes</Table.HeaderCell>
                            <Table.HeaderCell>Remittance</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        <Table.Row>
                            <Table.Cell>{faker.random.number()}</Table.Cell>
                            <Table.Cell>{faker.name.findName()}</Table.Cell>
                            <Table.Cell>{faker.random.number()}</Table.Cell>
                            <Table.Cell>{faker.address.streetAddress()}</Table.Cell>
                            <Table.Cell>{faker.date.weekday()}</Table.Cell>
                        </Table.Row>
                        // Some more rows 

                    </Table.Body>
                </Table>
            </Grid.Column>
        </Grid.Row>
    </Grid>
)

export default RemittancePage;

App.js:

  var user1 = {
  "number": "123",
  "role": "ADMIN"
};

var user2 = {
  "number": "456",
  "role": "USER"
};

class App extends Component {
  render() {
    return (
      <Router>
          <Switch>
              <div>
                <Route exact path="/" component={LoginForm}/>
                {/* <Route path="/user" component={RemittancePage} /> */}
                <Route path="/user" render={(user1) => <RemittancePage {...user1} />} 
                />
                <Route path="/remittanceform" component={RemittanceForm} />
              </div>
          </Switch>
      </Router>
    );
  }
}

export default App;

Screenshot: In below screenshot 2 buttons in top right should be displayed only if user == ADMIN if user === USER then I don't want to display it. How can I do this ?

Is user something you have in state? Is it urnNumber or something else? — Ryan Cogswell
– Ryan Cogswell, Commented Nov 21, 2018 at 13:14
@RyanC I am not using backend or database I have hardcoded 2 users one is admin and other is user — fun joker
– fun joker, Commented Nov 21, 2018 at 13:20
I still don't see how you're getting the user. In <Route path="/user" render={(user1) => <RemittancePage {...user1} />} />, user1 is going to be the route props (reacttraining.com/react-router/web/api/Route/route-props) not your user1 variable declared at the top of App.js (see this code sandbox: codesandbox.io/s/nnzwz247rj as demonstration). — Ryan Cogswell
– Ryan Cogswell, Commented Nov 22, 2018 at 2:31

Daniil Andreyevich Baunov · Accepted Answer · 2018-11-21 13:15:56Z

1

You can just use the following structure inside of your RemittancePage jsx template:

this.props.user.permissions === 'ADMIN' ? <Grid.Column floated='right' width={5}>
                <Button primary className={styles.formButton}>Remittance</Button>
                <Button primary className={styles.reportButton}>Generate Report + </Button>
</Grid.Column> : null

Assuming you have user passed to props.

Basically, same as in plain JS. Just an inline conditional.

answered Nov 21, 2018 at 13:15

Daniil Andreyevich Baunov

2,8833 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use role based authentication on client side reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related