Как разместить сообщение с помощью axios в React

Question

Это первый раз в реакции и аксио, у меня есть форма alogin и форма регистрации, и у меня нет базы данных, я хочу, чтобы какой-нибудь фиктивный API имитировал логин и подписку, которые предоставили бы токен в ответе, чтобысохранить его в локальном хранилище, чтобы пользователь вошел в систему, а также о том, как я запрещаю пользователю переходить на домашнюю страницу (экран входа / выхода из системы), когда он набирает, например, www.blabla.com. Я хочу, если токен существует.все еще в приложении, в противном случае токен будет удален.

Я пытался получить данные из фиктивного API с помощью axios.get (), это работало, но все еще статично

componentDidMount() { // this For Testing Until Now
      axios.get('https://jsonplaceholder.typicode.com/users')
            .then(res => {
                  console.log(res);
                   this.setState({
                    users: res.data
             }, () => {
                console.log('state', this.state.users)
            })
         });
}

Я хочу соединиться с API, который позволяет мне получать данные и публиковать данныеи это моя функция входа в систему

 handleLogin(e) {
    e.preventDefault();

    const email = e.target.elements.email.value;
    const password = e.target.elements.password.value;
    let userData = {};

    if(validator.isEmpty(email) || validator.isEmpty(password) || !validator.isEmail(email)) {
        this.setState({ 
            error: 'You Have To Complete Your Data Correctly'
         }, () => {
             console.log('failed');
         });
    } else {
        userData = {email, password};
        const { users } = this.state;
        if(users.find(item => item.email === userData.email)) {
            const index = users.findIndex(item => item.email === userData.email);
            this.props.history.push(`./create/${users[index].username}`);
        }
    }
}

, и это моя функция регистрации

handleAddNewUser(e) {
    e.preventDefault();

    const name = e.target.elements.userName.value.toLowerCase().trim();
    const email = e.target.elements.userEmail.value.toLowerCase().trim();
    const password = e.target.elements.pass.value;
    const repassword = e.target.elements.re_pass.value;   
    let userInfo = {};
    const { users } = this.state;
    console.log(name, email);

    if (validator.isEmpty(name) || validator.isEmpty(email) || 
        validator.isEmpty(password) || validator.isEmpty(repassword) || 
        !validator.isEmail(email) || !validator.equals(password, repassword)) {
        this.setState({
            error: 'You Have to enter valid data, Make Sure That The Fields are Complete',
            open: true
        });

    } else {
        userInfo = { name, email, password };

        if (
            users.find(item => item.name === userInfo.name) || 
            users.find(item => item.email === userInfo.email)
        ) {
            this.setState({
                error: 'This username or email is used',
                open: true
            });
        } else {
            this.setState({
                users: this.state.users.concat(userInfo),
                success: true
            }, () => {
                //  this.props.history.push(`./create/${userInfo.name}`);
                //  console.log(users)
            });
            console.log(users)
        }

    }
}

Заранее спасибо

Answer 1

Вы можете использовать axios.post() для отправки почтового запроса.

// POST
const userData = {
  email: 'demouser@gmail.com',
  username: 'demouser',
  password: '1a2b3c4d5e' //This should be encoded
}

axios.post('https://example.com/createUser', userData)
 .then(res => {
    responseData = res.data
    if (responseData.status == 'success') {
      const user = responseData.user
      ...
    } else {
      alert('Something went wrong while creating account')
    }
 })