Как сделать первоначальный аутентифицированный запрос с токеном из локального хранилища?

Я использую ванильный поток с некоторыми utils для связи с моими API.

При начальной загрузке страницы я хотел бы прочитать некоторый токен из локального хранилища, а затем сделать запрос к моему API, чтобы получить мои данные.

У меня есть библиотека LocalStorageUtils.js для взаимодействия с window.localStorage. Мой компонент-контейнер обрабатывает все действия входа/выхода из системы и считывает текущего пользователя при загрузке страницы.

App.js

componentWillMount() {
  LocalStorageUtils.get('user');
}

LocalStorageUtils считывает значение и передает его во Flux через ServerAction аналогично пример чата Flux.

get(key) {
  var value = window.localStorage.getItem(key);
  if (value) { 
    ServerActionCreators.receiveFromLocalStorage(key, value); 
  }
}

Это помещает пользователя в мой UserStore и в мои представления, где я могу показать имя пользователя и некоторую ссылку для выхода из системы и т. д.

У меня также есть ApiUtils.js для запроса данных с сервера. Итак, вопрос: где я могу сообщить своему ApiUtils, что у меня есть зарегистрированный пользователь при начальной загрузке страницы?

Я мог бы вызвать какой-нибудь метод внутри ApiUtils из моего LocalStorageUtils, но это кажется неправильным. Или мне нужно совершать еще один круговой обход всякий раз, когда я получаю событие изменения внутри моего компонента-контейнера?


reactjs flux reactjs-flux
person zemirco    schedule 25.06.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

var ApiUtils = function () {
   this.get = function (endpoint, data) {
      return theWayYouSendAjaxRequests.get(endpoint).setData(data);
   };
};

// Wherever your ApiUtils is used.
var api = new ApiUtils();
api.get('/me', {user: userFromStore});
person Henrik Andersson    schedule 26.06.2015
comment
Где и когда вы получите пользователя? И как бы вы поместили это во Flux? - person zemirco; 27.06.2015

arrow_upward
0
arrow_downward

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

Поскольку получение данных из локального хранилища является синхронным, нет необходимости передавать их через Flux через ServerActionCreators. Просто используйте LocalStorageUtils для получения текущего пользователя и вызовите метод login для этого пользователя. Действие login такое же, как при первоначальном входе пользователя в систему. login запускает получение новых данных с сервера. Новые данные сохраняются в моем DataStore, а пользователь сохраняется в моем UserStore.

Спасибо за все подсказки в Твиттере и на https://reactiflux.slack.com/.

person zemirco    schedule 01.07.2015