Question

嗨，我正在研究React和Redux单页应用程序，我遇到了一个问题。

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

但是我面临一个问题，我来自PHP和Laravel Background，他们可以在我的每条路线中添加一个中间件，并且可以轻松实现目标。

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

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

任何人都可以在这里帮助我解决这个问题。

Answer 1

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

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

检查this中的HTTP拦截器

Answer 2

如果您使用的是connected-react-router

每次路线更改时，它都会调度一种'@@router/LOCATION_CHANGE'类型的动作。

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

最理想的选择是还原middlewares。

这是redux流，

调度动作->存储执行该动作并传递给中间件->中间件执行一些操作并继续传递->减速器获得该动作并计算新状态

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

您可以为'@@router/LOCATION_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)
)

反应js和redux在每个路由之前发送api调用

2 个答案: