ReactJS | Для входа в систему требуется обновление

#reactjs

Вопрос:

Моя страница входа в систему не работает, и для входа в систему требуется обновление. входные данные отображаются в консоли с 201, но мне нужно вручную обновить страницу, чтобы продолжить.

это мое login.js:

 export default class Login extends Component {
    state = {};
   submitHandler = e => {
        e.preventDefault()

        const logingdata ={
            email : this .Email,
            password: this .Password
        }
        
           axios
           .post('/api/UserLogin', logingdata)

           .then(response => {
               console.log(response); //to print response in console in developper tool
               
               localStorage.setItem('login', response.data.token);
              console.log(this.Email);{
                  const loginmail=logingdata.email
                  console.log(loginmail);
              }
               
           })
           .catch(error => {
               console.log(error => console.log(error.response.data))
           })
    }

    
    render() {

        return (

            <div className="outer">
            <div className="inner"> 
            <form onSubmit={ this.submitHandler}>

                <h3>Log in</h3>
                
              //Login form comes here.
                <button type="submit" className="btn btn-dark btn-lg btn-block" >Sign in</button>
               
                <p className="forgot-password text-right">
                    Forgot <Link to= "/Forgotpassword" >password?</Link>
                </p>
            </form>
            </div>
            </div>
        );
    }
}

Я не могу понять, в чем проблема. Кто-нибудь может мне в этом помочь?

1. Что он должен делать после входа в систему. Вы не перенаправили?

2. ДА. форма остается такой же, как и с входными данными (но сетевой вызов выполнен успешно), даже после того, как я нажму «войти». Я использовал историю и события onclick. но это не сработало. Они направляются к целевому маршруту, но сетевой вызов не выполняется успешно.

Ответ №1:

Код, который вы представляете, сохраняет токен в локальном хранилище, и, вероятно, другие компоненты обрабатывают перенаправление, когда у вас будет эта информация в хранилище. Вам нужно будет перенаправить на определенный URL-адрес ( возможно, домашнюю страницу), localStorage.setItem('login', response.data.token); и все.

1. Да.. не могли бы вы, пожалуйста, показать мне, как перенаправить на «/» (главная страница) ? вы имеете в виду использование истории?

2. реквизит.история.нажмите(‘/’)

3. @DevindiSiwurathna вы можете перенаправлять разными способами, в зависимости от того, как Login компонент подключен к маршрутизатору. Попробуй this.props.history.push('/')

Ответ №2:

Вы настраиваете данные пользователя, зарегистрированные после ответа api post. но я не вижу изменений в localstorage.

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

Используйте что-то вроде react-use-localstorage

затем вы можете посмотреть, изменились ли пользовательские данные, и отобразить зарегистрированные компоненты, или, например, отправить пользователя по новому маршруту.