Redux + react-router:路由拦截和redux

// actions.js
export const checkAuth = () => async (dispatch, getState) => {
  const isAuthenticated = await someAuthCheck(); // 假设这是一个异步验证函数
  dispatch({ type: 'SET_AUTH', payload: isAuthenticated });
};

// middleware.js
const authMiddleware = store => next => action => {
  if (action.type === 'NAVIGATE_TO_PROTECTED_ROUTE') {
    store.dispatch(checkAuth());
  }
  return next(action);
};

// App.js
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';

function ProtectedRoute({ component: Component, ...rest }) {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

function App() {
  return (
    <Router>
      <Route path="/protected" component={ProtectedRoute} />
      {/* 其他路由 */}
    </Router>
  );
}