Повторить рендеринг элемента после входа пользователя в систему и сохранить токен в localStroage - PullRequest
Новая
       9

Повторить рендеринг элемента после входа пользователя в систему и сохранить токен в localStroage

0 голосов
/ 17 июня 2020

Я хочу перенаправить пользователя после того, как пользователь войдет в систему. Мой логин отправляет токен jwt на localStroage, но у меня проблема со временем, которое связано с перенаправлением пользователя.

В компоненте «Мой логин» у меня есть: 

 state = {
    formData: {
      email: '',
      password: '',
    },
    userRedirect: false,
    logIn: false,
  };

Мой вход получил запросы API и изменил состояние входа на true. 

signIn = (user) => {
    const config = {
      headers: {
        'Content-Type': 'application/json',
      },
    };
    axios
      .post(`${API_URL}/login`, user, config)
      .then((res) => authenticateUser(res.data));
    this.setState({
      formData: { email: '', password: '' },
      userRedirect: true,
      logIn: true,
    });
  };

В моем компоненте я хочу выполнить рендеринг на основе !localStroage.getItem('jwt')

render() {
    const { email, password } = this.state.formData;
    return (
      <Layout title='Login Form' description='Login to your account'>
        {/* {this.formRender(email, password)} */}
        {!localStorage.getItem('jwt')
          ? this.formRender(email, password)
          : this.redirectUser()}
      </Layout>
    );
  }

И это не работает для меня. Мой formRender() работает нормально, но когда он переходит на redirectUser(), я получаю user.role 'undefined'. Это делает разумным, потому что нет токена, когда он пытается отобразить redirectUser(). Как я могу оставить redirectUser(), пока мой токен не окажется в localStorage. Я пытался использовать setTimeout() с componetDidMount, но сначала он получал user.role 'undefined', а через 2 секунды он получал роль пользователя, как и должно, но перенаправление не работало

...