Каков наилучший вариант для защиты ваших маршрутов в React? - PullRequest
Новая
       4

Каков наилучший вариант для защиты ваших маршрутов в React?

0 голосов
/ 10 февраля 2020

Я использую этот HO C для защиты своих маршрутов, но я нахожу странным использование этого HO C в каждом компоненте, потому что я уже использую 1 или 2 HO C, как reduxForm et c

import React from "react";
import { connect } from "react-redux";

export default ChildComponent => {
  class ComposedComponent extends React.Component {

    componentDidMount() {
      this.shouldNavigateAway();
    }

    componentDidUpdate() {
      this.shouldNavigateAway();
    }
    shouldNavigateAway() {
      if (!this.props.auth) {
        this.props.history.push("/");
      }
    }
    render() {
      return <ChildComponent {...this.props} />;
    }
  }
  const mapStateToProps = state => {
    return { auth: state.auth };
  };
  return connect(mapStateToProps)(ComposedComponent);
};

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

Я не знаю, как вы реализуете свои маршруты, но для этого есть чистое решение. 

render() {
    let routes = (
      <Switch>
        <Route path="/auth" component={asyncAuth} />
        <Route path="/" exact component={BurgerBuilder} />
        <Redirect to="/" />
      </Switch>
    );

    if (this.props.isAuthenticated) {
      routes = (
        <Switch>
          <Route path="/checkout" component={asyncCheckout} />
          <Route path="/orders" component={asyncOrders} />
          <Route path="/logout" component={Logout} />
          <Route path="/auth" component={asyncAuth} />
          <Route path="/" exact component={BurgerBuilder} />
          <Redirect to="/" />
        </Switch>
      );
    }

    return (
      <div>
        <Layout>
          {routes}
        </Layout>
      </div>
    );
  }

И сохраняйте токен аутентификации в своем редуксе. 

const mapStateToProps = state => {
  return {
    isAuthenticated: state.auth.token !== null
  };
};
0 голосов
/ 10 февраля 2020

Подход Ho C является правильным, но вы должны применять его к маршрутам, а не к компонентам .

Взгляните на шаблон, используемый в redux-auth- обертка

...