ReactJS - Ждите ответа от стороннего скрипта перед визуализацией

Question

Я реализовал J-Toker в моем внешнем интерфейсе приложения с помощью React и потока (с API бэкэндом Rails), аналогичным образом к этому проекту react-flux-jwt-authentication-sample

Приборная панель должна быть доступна только зарегистрированный пользователь. Для этого J-Toker называет мой Rails API и возвращает пользователя loggedIn (или нет, если никто не зарегистрирован ...), который доступен с помощью Auth.user.

Так я мой Dashboard компонент, завернутые в AuthenticatedComponent:

Dashobard.jsx

export default AuthenticatedComponent(Dashobard); 

Вот мой AuthenticatedComponent.jsx:

export default (ComposedComponent) => { 
    return class AuthenticatedComponent extends React.Component { 

    static willTransitionTo(transition) { 
     if (!LoginStore.isLoggedIn()) { 
     transition.redirect('/login', {}, {'nextPath' : transition.path}); 
     } 
    } 

    ... 
} 

Наконец здесь мой LoginStore.jsx Код:

import Auth from 'j-toker'; 

class LoginStore extends BaseStore { 

    ... 

    isLoggedIn() { 
    return Auth.user.signedIn; 
    } 
} 

Все прекрасно работает, за исключением, когда я вручную обновить страницу. В этом случае Auth.user.signedIn возвращает undefined, даже если пользователь зарегистрирован и перенаправлен на страницу входа. Я обнаружил, что проблема возникает из-за того, что Auth.user еще не загружен, когда вызывается LoginStore.isLoggedIn(), потому что в этом случае Auth.user возвращает пустой объект, и если я немного подожду (проверен с базовым setTimeout), он возвращает пользователя loggedIn.

Я новичок в React.JS (используя его всего через неделю), и я не уверен, как с этим бороться. Я прочитал много статей и не могу понять, как React.JS предназначается для использования, особенно с сторонними плагинами (у меня также есть много проблем с использованием плагинов анимации, но это еще одна история ...).

Может ли кто-нибудь помочь мне в этом?

Это было бы оценен :)

Answer 1

Это происходит потому, что, когда вы передаете конфигурацию J-Токер, библиотека будет проверять хранимые маркера. Если он найдет один, он будет проверять маркер с вами API. Вот почему вызов configure, он вернет вам объект jquery Deferred, который будет разрешен после того, как проверка будет выполнена или отклонена, если нет сохраненного маркера. Если валидация проходит в вас API, пользовательский объект будет возвращен и установлен в Auth.user.

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

var promise = Auth.configure({ 
    apiUrl: 'your-api-host' 
}); 

promise.always(function() { 
    router.run(function (Handler) { 
    React.render(<Handler />, document.getElementById('content')); 
    }); 
});