реагировать JS и Redux отправляя вызов API перед каждым маршрутом

Question

Привет, я работаю над одностраничным приложением реагирования и редукции и столкнулся с проблемой.

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

, но я столкнулсяпроблема, с которой я столкнулся с PHP и Laravel Background, я могу просто добавить промежуточное ПО на каждом из моих маршрутов и легко достичь своей цели.

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

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

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

Answer 1

Если вы используете connected-react-router

Он отправляет действие с типом '@@router/LOCATION_CHANGE' каждый раз, когда меняется маршрут.

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

Идеальным местом для этого являются избыточные промежуточные программы .

Вот избыточный поток,

диспетчерское действие -> store получает действие и передает промежуточное программное обеспечение -> middlewares выполняет некоторые действия и передает -> редукторы получают действие и вычисляют новое состояние

Таким образом, у вас будет промежуточное программное обеспечение, которое выполняет ваши вызовы и проверки API.что вам нужно.Затем вы решаете передать действие редуктору, тем самым изменить маршрут или остановить действие и перенаправить.

Вы можете добавить промежуточное программное обеспечение для '@@router/LOCATION_CHANGE'

Примерно так:

import { push } from 'connected-react-router'
const loadingMiddleware = (store) => (next) => (action) => {
  if (action.type === '@@router/LOCATION_CHANGE') {
    // TODO: do api call here
    if (appIsClosed){
      // redirect to error route
      dispatch(push('/error'))
      // halt current action by returning void
      return;
    }
  }
  // pass onto next middleware
  return next(action);
};

export default loadingMiddleware;

Затем добавьте это промежуточное ПО при создании магазина.

import { createStore, combineReducers, applyMiddleware } from 'redux'

const todoApp = combineReducers(reducers)
const store = createStore(
  todoApp,
  // applyMiddleware() tells createStore() how to handle middleware
  applyMiddleware(loadingMiddleware)
)

Answer 2

Я думаю, что отправка HTTP-запроса перед любым маршрутом не является оптимальным решением для вашей проблемы.

Самый простой способ - просто вернуть HTTP-ошибку в ответ на авторизованный HTTP-запрос, если ресторан закрыт.Таким образом, вы можете настроить некоторый перехватчик HTTP-запросов на стороне клиента и перехватывать каждый HTTP-ответ - если он содержит ответ об ошибке - затем просто перенаправить пользователя на страницу с ошибкой.

Проверьте this для перехватчиков HTTP