Javascript react js和redux在每个路由之前发送api调用

嗨，我正在处理react和redux单页应用程序，我面临一个问题

在我的应用程序中，管理员可以从管理面板关闭和打开应用程序。这意味着如果应用程序从管理员端关闭，我们将重定向用户到错误页面路由，如果应用程序从管理面板打开，则我们将允许用户访问和查看我们应用程序的页面

但我面临一个问题，我来自PHP和Laravel的背景，我可以在我的每一条路线中添加一个中间件，我可以轻松实现我的目标

我已经做了一些研究，我发现我必须为此创建一个更高阶的组件，并在应用程序启动时调用api，并且必须将api结果存储在本地存储中，但是如果我调用api并将api结果存储在本地存储中，然后在接下来的5分钟内与管理员关闭餐厅，那么我该怎么做更新我的客户端本地存储，以便在应用程序从“管理”面板关闭时，我可以限制用户访问页面

这就是为什么我需要在每个路由之前发送一个ajax请求，以验证用户是否可以查看页面

---

有人能帮我解决这个问题吗？我该如何实现上述目标。

我认为在任何路由之前发送HTTP请求并不是解决问题的最佳方案

最简单的方法是，如果餐厅关闭，只返回HTTP错误以响应授权的HTTP请求。因此，您可以在客户端设置一些HTTP请求拦截器，拦截每个HTTP响应（如果它包含错误响应），然后将用户重定向到错误页面

---

检查HTTP拦截器

我认为在任何路由之前发送HTTP请求并不是解决问题的最佳方案

最简单的方法是，如果餐厅关闭，只返回HTTP错误以响应授权的HTTP请求。因此，您可以在客户端设置一些HTTP请求拦截器，拦截每个HTTP响应（如果它包含错误响应），然后将用户重定向到错误页面

如果正在使用，请检查HTTP侦听器

每次路由更改时，它都会发送一个类型为“@@router/LOCATION\u CHANGE”的操作

在您的情况下，您需要在更改路由之前进行一些api调用

最好的地方是redux

这里是redux flow

dispatch action->store获取操作并传递给Middleware->Middleware做一些事情并传递->Reducer获取操作并计算新状态

因此，您将拥有一个中间件，它执行api调用并检查您需要的内容。然后决定将操作传递给reducer，从而更改路由，或者停止操作并重定向

您可以为“@@router/LOCATION\u CHANGE”添加redux中间件

像这样的

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)
)

如果您正在使用

每次路由更改时，它都会发送一个类型为“@@router/LOCATION\u CHANGE”的操作

在您的情况下，您需要在更改路由之前进行一些api调用

最好的地方是redux

这里是redux flow

dispatch action->store获取操作并传递给Middleware->Middleware做一些事情并传递->Reducer获取操作并计算新状态

因此，您将拥有一个中间件，它执行api调用并检查您需要的内容。然后决定将操作传递给reducer，从而更改路由，或者停止操作并重定向

您可以为“@@router/LOCATION\u CHANGE”添加redux中间件

像这样的

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)
)

---

但是我们的网站中有一些静态页面，我们希望限制用户访问类似的主页，因为如果用户不发送http请求并直接访问主页，那么他将看到主页并认为餐厅已打开。因此，我们需要一种方法停止所有应用程序，因此等待用户执行http请求操作是非常困难的我认为这不是一个合适的方法。如果我错了，请纠正我。在这种情况下，我认为最好的方法是在返回主页时检查应用程序是否已启用。因此，如果应用程序未启用-返回HTTP 404或类似的内容。如果您无法控制在服务器上呈现HTML页面的过程，那么就无法禁止用户访问该页面，因为无论如何，他可以清理本地存储，cookie或其他任何东西，然后访问您的页面。谢谢，我还将等待其他开发人员回答我的问题，以便我选择最佳方式。另外，请您详细解释此过程，我如何才能做到这一点。如果您不控制在服务器上呈现HTML页面的过程，但我们的网站中有一些静态页面，我们希望限制用户访问类似主页，因为如果用户不发送http请求和访问

---

直接打开主页，他会看到主页并认为餐厅已打开。因此，我们需要一种方法停止所有应用程序，因此等待用户执行HTTP请求操作不是我认为合适的方式。如果我错了，请纠正我。在这种情况下，我认为，最好的方法是在返回主页时检查应用程序是否已启用。因此，如果应用程序未启用-返回HTTP 404或类似的内容。如果您无法控制在服务器上呈现HTML页面的过程，那么就无法禁止用户访问该页面，因为无论如何，他可以清理本地存储，cookie或其他任何东西，然后访问您的页面。谢谢，我还将等待其他开发人员回答我的问题，以便我选择最佳方式。另外，请您详细解释此过程，我如何才能做到这一点。如果您无法控制在服务器上呈现HTML页面的过程，请详细解释您的答案。我是react的初学者。希望您不介意……@usama是的，没有问题。Redux Middleware相当先进，至少医生这么说。添加了尽可能多的解释，并添加了一些有用的链接。如果还有其他问题，请告诉我。谢谢，我会调查redux中间件，然后再给你回复，以便我能理解你的答案。你能更详细地解释你的答案吗。我是react的初学者。希望你不介意……@usama是的，没问题。Redux Middleware相当先进，至少医生这么说。添加了尽可能多的解释，并添加了一些有用的链接。如果还有其他问题，请告诉我。谢谢，我会调查redux中间件，然后再给你回复，以便我能理解你的答案。