Блог

Главная - Вопросы по программированию - Как добавить роли в ReactJS?

Как добавить роли в ReactJS?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я хочу добавлять роли администратору при входе в систему, чтобы администратор мог создать нового пользователя. Я не знаю, как добавить роли и заставить их работать. Вот мой код:

Login.js

 class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
        }
    }

    onChangeInput = e => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onLogin = async () => {
        const { username, password } = this.state

        const exist = this.props.listUsers.find(user => user.username === username)
        if (exist) {
            this.props.changeLogIn() 
        } else if(username === 'admin' amp;amp; password === "123") {
            const roles = "ADMIN";
            this.props.changeLogIn()    
        }

    }

    render() { 
        if (this.props.statusLogin){
            return <Redirect to="/about" />
        }

        return (
            <div className="login">
                <form className="login-form" method="POST">
                    <div className="container-log">
                        <h1 className="judul">Login</h1>
                        <RowInput value={this.state.username} label="Username" placeholder="Username" type="text" name="username" onChange={this.onChangeInput}/>
                        <RowInput value={this.state.password} label="Password" placeholder="Password" type="password" name="password" onChange={this.onChangeInput}/>
                        <Button onClickInput={this.onLogin}>Masuk</Button>
                    </div>
                </form>
            </div>
        );
    }
}

Body.js

 showPage = () => {
        const { changeLogIn, statusLogin } = this.props

        return (
            <Switch>
            <Route path="/about"  children={(props) => <About {...props} statusLogin={statusLogin} listUsers={this.state.userData} />} />
                <Route path="/login">
                    <Login changeLogIn={changeLogIn} listUsers={this.state.userData} statusLogin={statusLogin} />
                </Route>
                <Route path="/register">
                    <Register listUsers={this.state.userData} tambahUser={this.addUsers} />
                </Route>
            </Switch>
        )
    }

App.js

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: "login",
      isLoggedIn: false
    }
  }

  changeLogIn = () => {
    this.setState(oldState => ({ isLoggedIn: !oldState.isLoggedIn }))
  }

Да, я знаю, что этот код не будет работать (особенно Login.js ), но опять же, я не знаю, как это исправить. Например, у меня в голове есть несколько решений, но я не могу их закодировать. Спасибо вам заранее!

Ответ №1:

Администратор, роли пользователей — это то, что мы должны делать в бэкэнде, но если вы пытаетесь сделать это во внешнем интерфейсе, тогда должен быть один супер-администратор (он добавляет новых администраторов или пользователей), администраторы (он может добавлять пользователей)

сохраните данные для входа в cookie или localstorage и перенаправьте пользователя, если он не авторизован, я могу написать код, если вы спросите меня о чем-то конкретном