Перерисовать компонент Reactjs - PullRequest
Новая
       10

Перерисовать компонент Reactjs

0 голосов
/ 02 июля 2019

У меня есть приложение, которое требует аутентификации через и API-вызов к серверу аутентификации (AS). (AS) перенаправит на мое приложение информацию, необходимую для установки некоторых файлов cookie браузера, которые будут влиять на то, что пользователь может видеть в зависимости от уровня его / ее разрешения.

Однако я не могу заставить свое приложение обнаружить изменения в файлах cookie и соответствующим образом отобразить. Мне нужно нажать кнопку обновления вручную, чтобы заставить компоненты просмотреть файлы cookie и извлечь информацию.

Мой вопрос таков: почему такие методы, как render (), componentDidMount () не были вызваны, когда я был перенаправлен обратно в мое реагирующее приложение с сервера аутентификации?

App.js: 

componentDidMount() {
    console.log('App mounted!');
    const env = process.env.NODE_ENV;
    const code = this.getParameterByName('code');
    const stateID = this.getParameterByName('state');
    const authentication = new Authentication();
    const authorization = new Authorization();

    const sid = Cookies.get('sid'); 

    console.log('sid: ', sid);

    if (sid === undefined) {
      if (code === null || stateID === null) {
        authentication.signin(expressURL, env);
      } else {
        authentication.handleIDToken(expressURL, code, stateID).then(reply => {
          // console.log('Reply: ', reply);

          // let dt = new Date(reply.expiry * 1000).toUTCString();
          Cookies.set('userRole', reply.Role, {path: '/', expiry: new Date(reply.expiry * 1000).toUTCString()});
          Cookies.set('userName', reply.Name, {path: '/', expiry: new Date(reply.expiry * 1000).toUTCString()});
          Cookies.set('sid', reply.SID, {path: '/', expiry: new Date(reply.expiry * 1000).toUTCString()});
        });
      }
    }

    if (sid !== undefined && Cookies.get('apiToken') === undefined) {
      authorization.setDjangoApiToken(expressURL).then(response => {
        if (response === 200) {
          this.initialize();  // Populates my redux stores
        } else {
          this.setState({
            error: response
          });
        }
      });
    }
  }

Или я неправильно понял жизненный цикл React?

Я использую React15 & js-cookies

*** У меня есть бэкэнд Express.js, который выполняет эти вызовы к серверу аутентификации.

Приветствия

1 Ответ

0 голосов
/ 02 июля 2019

Вот несколько вариантов:

  1. Принудительно перезагрузите ваше приложение с помощью window.location.reload();
  2. Передайте некоторую опору componentDidUpdate() в вашем App.js и оцените, есть ли cookieбыл установлен или нет.
...