javascript - 如何在客户端 reactjs 上使用基于 Angular 色的身份验证？

Question

我创建了 2 个组件，一个是登录表单，另一个组件显示表格，其中包含一些通过 faker.js 生成的随机数据。用户登录后，表格组件会显示一些数据。该组件在右上角也有 2 个按钮，所以我只想在 user === ADMIN 时显示这些按钮，如果 user === USER 那么我不想显示那两个按钮。我怎样才能做到这一点 ？我应该创建一个单独的组件来排除这 2 个按钮吗？

登录.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;

表格组件.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;

应用程序.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;

截图:在下面的屏幕截图中，仅当 user == ADMIN 时才应显示右上角的 2 个按钮，如果 user === USER 那么我不想显示它。我怎样才能做到这一点 ？

Answer 1

您可以在 RemittancePage jsx 模板中使用以下结构:

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

假设您已将 user 传递给 props。

基本上，与普通 JS 相同。只是一个内联条件。