React Router v4：导航更改时发送请求

Question

我正在使用 react-router v4 编写身份验证代码，并且我正在使用带有渲染道具的 PrivateRoute，如文档：Redirects (Auth)

我要做的是：每当用户导航到一条路线时，我想调度一个操作以向后端发出请求以验证他是否已登录。

像这样：

// App.js
class App extends Component {
  checkAuth = () => {
    const { dispatch, } = this.props;
    // callback to dispatch
  }

  render() {
    const props = this.props;

    return (
      <Router>
        <div className="App">
          <Switch>
            <Route exact path="/" component={Login} />

            <PrivateRoute
              exact
              path="/dashboard"
              component={Dashboard}
              checkIsLoggedIn={this.checkAuth}
            />

            {/* ... other private routes here */}

          </Switch>
        </div>
      </Router>
    );
  }

在 PrivateRoute.js 中，我正在监听路由以检查它是否更改，但是当路由更改时，此函数被调用太多次，这是调度操作以发出请求的问题。

// PrivateRoute.js
const PrivateRoute = ({ component: Component, auth, checkIsLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      props.history.listen((location, action) => {

        if (checkIsLoggedIn) {
          // Here I check if the route changed, but it render too many times to make a request
          checkIsLoggedIn(); // here is the callback props
        }
      });

      if (auth.login.isLoggedIn) {
        return <Component {...props} />;
      } else {
        return <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
      }


    }
    }
  />
);  

我需要帮助找出一个在路由发生变化时调用后端的好方法。

Answer 1

创建Higher Order Component (HOC) 是一种非常简洁的方法。这样，您无需创建单独的PrivateRoute 组件，只需进行一行更改即可将任何组件从公共转换为受保护，反之亦然。

这样的事情应该可以工作：

import React from 'react';
import { Redirect } from "react-router-dom";

export function withAuth(WrappedComponent) {
    return class extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                isUserLoggedIn: false,
                isLoading: true
            };
        }

        componentDidMount() {
            // Check for authentication when the component is mounted
            this.checkAuthentication();
        }

        checkAuthentication() {
            // Put some logic here to check authentication
            // You can make a server call if you wish,
            // but it will be faster if you read the logged-in state
            // from cookies or something.
            // Making a server call before every protected component,
            // will be very expensive, and will be a poor user experience.
            this.setState({
                isUserLoggedIn: true,       // Set to true or false depending upon the result of your auth check logic
                isLoading: false
            });
        }

        render() {
            // Optionally, you can add logic here to show a common loading animation,
            // or anything really, while the component checks for auth status.
            // You can also return null, if you don't want any special handling here.
            if (this.state.isLoading) return (<LoadingAnimation />);

            // This part will load your component if user is logged in,
            // else it will redirect to the login route
            if (this.state.isUserLoggedIn) {
                return <WrappedComponent authData={this.state} {...this.props} />;
            } else {
                return <Redirect to={{ pathname: "/login", state: { from: props.location } }} />;
            }
        }
    }
}

一旦您拥有该组件，您需要做的就是在您希望保护的任何组件中使用 HOC。例如，在您的情况下，Dashboard 文件中的导出行将是这样的：

/* Dashboard.js */
class Dashboard extends React.Component { ... }

export default withAuth(Dashboard);

在您的App 中，您可以使用一个简单的Route 组件：

<Route exact path='/dashboard' component={Dashboard} />

您的App 不需要关心哪些路由受保护，哪些不受保护。事实上，只有实际的组件需要知道它们是受保护的。

希望这会有所帮助。干杯! :)