Лучший способ обновить токен каждый час?

Question

Я создаю веб-сайт с помощью React, и мне приходится отправлять около 3 запросов на каждую страницу, но в первую очередь мне нужно получить токен связи, который необходимо обновлять каждый час, а затем использовать его в качестве базыдля всех других запросов.

У меня есть план, чтобы получить его, как только приложение смонтирует и перевести его в состояние (redux, thunk), и использовать его в каждом компоненте, который подписывается на хранилище, а затем также помещать функцию setInterval в метод componentDidMount. Еще одна вещь, которая приходит мне в голову - это поместить ее в локальное хранилище, но это будет немного сложно (мне приходится анализировать каждый раз, когда я получаю что-то из локального хранилища).

class App extends React.Component {
  componentDidMount() {
    this.props.getToken()

    setInterval (this.props.getToken, 5000)
 }

Это работает довольно хорошо,и переключение между страницами ничего не портит, работает довольно хорошо. Обратите внимание, что здесь 5000 миллисекунд просто для того, чтобы попробовать, я бы назвал их 3500000. Это нормально или есть другой способ сделать это? Спасибо!

Answer 1

Ваша реализация довольно хорошо, хотя я бы сделал несколько изменений

1. Используйте локальное хранилище, чтобы вам не пришлось повторно загружать токен, если пользователь обновляет страницу (так как она будет потерянаиз памяти). Также вы будете иметь те же преимущества при работе с несколькими вкладками. Вы можете легко создать некоторую LocalStorageService, которая будет выполнять для вас весь синтаксический анализ / stringify, так что вам не придется беспокоиться.
2. Я бы предложил перенести эту логику в какую-то службу, где вы будете контролировать своипоток токенов намного проще - например, что произойдет, если пользователь выйдет из системы или токен станет недействительным? Вам нужно будет получить новый токен из другого места, кроме вашего приложения (поскольку root componentDidMount будет вызываться только один раз), а также вам нужно очистить текущий интервал (на который вы не будете ссылаться в текущей реализации)чтобы избежать множественных интервалов.

Вместо интервалов, возможно, вы могли бы даже использовать setTimeout, чтобы избежать нескольких интервалов в крайних случаях:

getToken() {
    // do your logic
    clearTimeout(this.tokenExpire);
    this.tokenExpire = setTimeout(() => getToken(), 5000);
}

В целом ваша реализация в порядке - этоможет быть улучшено только для упрощения обслуживания, и вам нужно будет охватить некоторые крайние случаи (по крайней мере, упомянутые выше).

Answer 2

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

Если такой опции нет. Я бы предложил использовать axios . Вы настраиваете его для проверки токенов на каждый запрос или ответ и соответственно обрабатывает токены.