Question

这是React和axios中的第一次，我具有alogin形式和注册形式，并且没有任何数据库，我希望任何模拟api来模拟登录并注册，以便在响应中提供一个tocken以便将其保存在本地存储中以保持用户登录状态，以及在用户键入例如www.blabla.com时我如何防止用户进入主页（登录/注销屏幕），我希望是否存在令牌仍在应用程序中，否则令牌将被删除。

我试图通过axios.get（）从模拟api提取数据，但它仍然有效

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')
    }
 })

如何在React中使用axios发布

1 个答案: