Как обновить токены JWT в приложении React.js? - PullRequest
Новая
       31

Как обновить токены JWT в приложении React.js?

0 голосов
/ 05 февраля 2019

Я проверил все подобные вопросы здесь, но ни один не имеет то, что мне нужно.Я защищаю маршруты в своем приложении и отправляю JWT с каждым запросом, и все здесь хорошо.Проблема в том, что когда JWT истекает, вместо того, чтобы выходить из системы пользователя, мне нужно знать, как обновить этот токен и оставить пользователя в системе.

Все говорят о создании "Middleware", который обрабатывает это,но никто не говорит, как создать это промежуточное программное обеспечение и что в нем есть?

Итак, что является лучшим способом сделать это?Должен ли я проверить срок действия JWT перед отправкой какого-либо запроса?или я должен ждать ответа "401", а затем попытаться обновить токен (что я не знаю, как это сделать), или что именно?

Если у кого-нибудь есть рабочий пример такого промежуточного программного обеспечения илипакет или проект на Github, который может помочь мне в этом, это было бы здорово.

Меня интересует только начальная часть процесса, что отправлять от реакции и что я должен ожидать получитьи что с этим делать.

1 Ответ

0 голосов
/ 05 февраля 2019

ваше промежуточное ПО должно выглядеть как этот блок кода (например, вы можете использовать все, что захотите) 

/* eslint-disable */
import request from 'superagent';
function call(meta, token) {
  const method = meta.API_METHOD ? meta.API_METHOD : 'GET';
  let req = request(method, 'http://localhost:8000/' + meta.API_CALL);
  req = req.set({ Authorization: `JWT ${token}` });
  req = meta.API_TYPE ? req.type('Content-Type', meta.API_TYPE) : req.set('Content-Type', 'application/json');
  if (meta.API_PAYLOAD) {
    req = req.send(meta.API_PAYLOAD);
  }
  if (meta.API_QUERY) {
    req.query(meta.API_QUERY);
  }

  return req;
}

export default store => next => action => {
  const state = store.getState();
  const token = state.logged && state.logged.get('token') ?
    state.logged.get('token') : 'eyJhbGciOiJIUzUxMiJ9';
  if (action.meta && action.meta.API_CALL) {
    call(action.meta, token)
      .then((res) => {
        store.dispatch({
          type: action.meta.API_SUCCESS,
          result: res.body,
        });
      })
      .catch(({ status, response }) => {
        if (action.meta.API_ERRORS && action.meta.API_ERRORS[status]) {
          return store.dispatch({
            type: action.meta.API_ERRORS[status],
            result: response.body,
          });
        }
        if (action.meta.API_ERRORS && action.meta.API_ERRORS[status] === '401') {
          /*call the refresh token api*/
          call(<Your Meta for refreshing>, <expiredtoken>)
                .then((res) => {
                    store.dispatch({
                    type: action.meta.API_SUCCESS,
                    result: res.body,
                    });
                })
                .catch(({ status, response }) => {
                    if (action.meta.API_ERRORS && action.meta.API_ERRORS[status]) {
                    return store.dispatch({
                        type: action.meta.API_ERRORS[status],
                        result: response.body,
                    });
                    }
                    throw response;
                });
        }
        throw response;
      });
  }
  return next(action);
};
...