क्या मुझे प्रत्येक संरक्षित पृष्ठ कंटेनर में जांच की आवश्यकता है और यदि यह लॉगिन पृष्ठ पर गलत रीडायरेक्ट करता है? यदि मेरे पास बहुत से सुरक्षित पृष्ठ हैं तो मैं क्या कर सकता हूँ?

0
user8736389 7 अक्टूबर 2018, 17:13

2 जवाब

सबसे बढ़िया उत्तर

आप अपने राउटर के लिए हायर ऑर्डर कंपोनेंट (HOC) का उपयोग कर सकते हैं। एक PrivateRouter हॉक का उपयोग करें।

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
) 

मार्ग के बजाय इसका उपयोग करें।

<PrivateRoute component={component} {...props} />
0
Tarek Essam 7 अक्टूबर 2018, 17:19

जैसा कि @Nisfan ने कहा, HOC बनाना कोई बुरा विचार नहीं है।

उदाहरण के लिए:

// This HOC redirects to the landing page if user isn't logged in.
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { LANDING } from '../constants/routes';

const ERROR_MESSAGE = 'You need to be logged in to access that page.';

const withAuthentication = (condition, route = LANDING) => (Component) => {
  class WithAuthentication extends React.Component {
    componentDidMount() {
      if (!condition(this.props.userState.loggedIn)) {
        this.props.history.push(route);
        // TODO: show error if you want
      }
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.userState.loggedIn !== this.props.userState.loggedIn) {
        if (!condition(nextProps.userState.loggedIn)) {
          this.props.history.push(route);
          // TODO: show error if you want
        }
      }
    }

    render() {
      return this.props.userState.loggedIn ? <Component /> : null;
    }
  }

  WithAuthentication.propTypes = {
    history: PropTypes.object.isRequired,
    userState: PropTypes.object,
  };

  const mapStateToProps = state => ({
    userState: state.userState,
  });

  const temp = connect(mapStateToProps)(WithAuthentication);

  return withRouter(temp);
};

export default withAuthentication;

फिर, जब आप किसी मार्ग की सुरक्षा करना चाहते हैं, तो आप एक शर्त के साथ अपने घटक को withAuthentication में लपेट सकते हैं।

उदाहरण के लिए, आपकी स्थिति यह हो सकती है कि उपयोगकर्ता साइन इन है या नहीं, या उपयोगकर्ता साइन इन है या नहीं और वह एक व्यवस्थापक है, आदि।

0
Colin Ricardo 7 अक्टूबर 2018, 17:20